autonomic-cooperative/ojuso-map
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add points of interest

Browse Source 
Do a bunch of refactoring in the process.  Current display on homepage
is a little shonky but that can be improved when there is something
using it.
This commit is contained in:
Anna Sidwell
2018-10-13 01:04:44 -04:00
parent f2823445a4
commit acfbb513de
13 changed files with 632 additions and 472 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
apps/map/templates/map/index.html
View File

@ -32,59 +32,10 @@ html, body, #main {
.popup-labels .label {
font-size: 100%;
}
.hello {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
overflow: auto;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.5);
background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHZpZXdCb3g9IjEwMCA1IDIwMCAyNTUiPg0KICA8cGF0aCBkPSJNMjM4IDEyN2g1M2wtMjYtMTUtMjcgMTUiIGZpbGw9InJnYmEoMjUyLCAyMTEsIDI5LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0yOTQgMTIybC0yOS01MS0yOSA1MSAyOS0xNyAyOSAxNyIgZmlsbD0icmdiYSgxMDIsIDE5OCwgODcsIDAuNSkiLz4NCiAgPHBhdGggZD0iTTIyOCAxMjRsMzItNTZoLTY0bDMyIDU2IiBmaWxsPSJyZ2JhKDIyMSwgNjgsIDU4LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0xODYgNjNMMTUzIDdsLTMyIDU2aDY1bTExMSAxOTNsLTMyLTU2LTMyIDU2aDY0IiBmaWxsPSJyZ2JhKDEwMiwgMTk4LCA4NywgMC41KSIvPg0KICA8cGF0aCBkPSJNMjIzIDEyN2wtMzItNTYtMzMgNTZoNjUiIGZpbGw9InJnYmEoMjUyLCAyMTEsIDI5LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0yNjAgMTkxbC0zMi01Ni0zMiA1Nmg2NCIgZmlsbD0icmdiYSgyMjEsIDY4LCA1OCwgMC41KSIvPg0KICA8cGF0aCBkPSJNMTUzIDEyNGwzMy01NmgtNjVsMzIgNTYiIGZpbGw9InJnYmEoMzcsIDE0MCwgMjEyLCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0yMjggMjUzbDMyLTU2aC02NGwzMiA1NiIgZmlsbD0icmdiYSgyNTIsIDIxMSwgMjksIDAuNSkiLz4NCiAgDQogIA0KICA8cGF0aCBkPSJNMTg2IDE5MWwtMzMtNTUtMzIgNTVoNjUiIGZpbGw9InJnYmEoMzcsIDE0MCwgMjEyLCAwLjUpIi8+DQogIA0KICANCiAgPHBhdGggZD0iTTExOSAxODRsMjctNDYtMjcgMTV2MzEiIGZpbGw9InJnYmEoMTAyLCAxOTgsIDg3LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0xOTMgMTg0bDI3LTQ2LTI3IDE1djMxIiBmaWxsPSJyZ2JhKDM3LCAxNDAsIDIxMiwgMC41KSIvPg0KICA8cGF0aCBkPSJNMjE3IDEzM2gtNTlsMzAgNTF2LTM0bDI5LTE3IiBmaWxsPSJyZ2JhKDEwMiwgMTk4LCA4NywgMC41KSIvPg0KICA8cGF0aCBkPSJNMTg4IDIwNWwtMjcgNDYgMjctMTZ2LTMwIiBmaWxsPSJyZ2JhKDM3LCAxNDAsIDIxMiwgMC41KSIvPg0KICA8cGF0aCBkPSJNMTY0IDI1Nmg1OWwtMzAtNTF2MzRsLTI5IDE3IiBmaWxsPSJyZ2JhKDIyMSwgNjgsIDU4LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0yMjUgMTJsLTI2IDQ2IDI2LTE2VjEyIiBmaWxsPSJyZ2JhKDI1MiwgMjExLCAyOSwgMC41KSIvPg0KICA8cGF0aCBkPSJNMjAxIDYzaDU5bC0yOS01MXYzNGwtMzAgMTciIGZpbGw9InJnYmEoMzcsIDE0MCwgMjEyLCAwLjUpIi8+DQo8L3N2Zz4=');
background-position: center;
background-blend-mode: luminosity;
}
.hello--container {
max-width: 40em;
margin: 0 auto;
}
.hello--text {
background-color: white;
margin-top: 5em;
margin-left: 1em;
margin-right: 1em;
margin-bottom: 1em;
padding: 1em;
z-index: 1100;
}
/* Top margin on small screns should be same as the rest */
@media (max-width: 768px) {
.hello--text {
margin-top: 1em;
}
}
.hello--logo {
width: 200px;
margin-bottom: 16px;
}
.hello--logo, .hello--hide {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
{% endblock %}
{% block title %}{% trans "Ojuso Platform Map" %}{% endblock %}
{% block inner_content %}
<div id="main"></div>
<div id="modals"></div>
@ -143,7 +94,7 @@ function getLabelClass(pos_or_neg) {
}
}
function popup(feature, layer) {
function caseStudyPopup(feature, layer) {
var str = '';
if(feature.properties.images.length > 0) {
str = "<img src='"+feature.properties.images[0].file+"' width='100%'>";
@ -157,8 +108,21 @@ function popup(feature, layer) {
"<span class='label label-"+getLabelClass(feature.properties.positive_or_negative)+"'>"+ feature.properties.positive_or_negative_display+"</span>"+
"</div>"+
"<a class='btn btn-sm btn-primary' href='case-study/"+feature.properties.slug+"'>{% trans "View full case study" %}</a>")
layer.bindPopup(str);
};
}
function poiPopup(feature, layer) {
str = (
"<div class='popup-head'>"+
"<h5>"+feature.properties.title+"</h5>" +
"</div>"+
"<p>"+feature.properties.synopsis+"</p>"+
"<p><a href='"+feature.properties.link+"'>Link</a></p>"
)
layer.bindPopup(str);
}
// This is called when the map is initialized
function main_app_init(map, options) {
@ -167,7 +131,26 @@ function main_app_init(map, options) {
// Pull data as GeoJSON and add to map with a modal
$.getJSON('/api/case-studies/', function(data) {
L.geoJson(data, {
onEachFeature: popup
onEachFeature: caseStudyPopup
}).addTo(map)
});
var geojsonMarkerOptions = {
radius: 4,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
// Pull data as GeoJSON and add to map with a modal
$.getJSON('/api/points-of-interest/', function(data) {
L.geoJson(data, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
},
onEachFeature: poiPopup
}).addTo(map)
});
}