Start here
User Guides
HTML |
---|
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script>(function(t,e,s,o){var n,c,l;t.SMCX=t.SMCX||[],e.getElementById(o)||(n=e.getElementsByTagName(s),c=n[n.length-1],l=e.createElement(s),l.type="text/javascript",l.async=!0,l.id=o,l.src=["https:"===location.protocol?"https://":"http://","widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd_2Fw5nxAtNDAAqLsYqzVv_2FShLJ0Nh9YusUOX1PgvKoy1p.js"].join(""),c.parentNode.insertBefore(l,c))})(window,document,"script","smcx-sdk");</script> |
HTML |
---|
<script type="text/javascript"> JSON_CACHE = 'http src="https://dlcalamelas.logcluster.org/'; MAP_RESOURCE = JSON_CACHE + "download/attachments/854504/dlca.json?api=v2"; <dlca-map.js"></script> <div id="map" style="height: 600px; width: 90%; margin: auto;"> </div>></div> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <script<div srcid="popup-content"></div> </div> <link rel="stylesheet" href="https://ajaxcdn.googleapisrawgit.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <script src="httphttps://cdn.leafletjspolyfill.com/leaflet-0.7.3/leaflet.jsio/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <style <script type="text/javascriptcss"> /********************************/ /**** LEAFLET MAP DEFINITION ***/ /********************************/ var popup = L.popup(); var zoom = 3; var map = L.map('map', { zoomControl: true }).setView([0, 25], zoom); var legend = L.control({ position: 'bottomright' }).ol-popup { position: absolute; var Thunderforest_Landscape = L.tileLayer('http://{s}.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png', {background-color: white; maxZoom: 18, minZoom: 2, attribution: '' }); Thunderforest_Landscape.addTo(map); function chooseStyle(url) { var other = { weight: 2, color: "#fff", opacity: 1, fillColor: "#666666", fillOpacity: 0.5 }-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); var orange = { weight: 2, color: "#fff", opacity: 1, fillColor: "#4A9F21", fillOpacity: 0.8filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); }padding: 15px; (url.length > 0) ? style = orange : style = otherborder-radius: 10px; border: 1px solid return style#cccccc; } var countries2colors = new Array()bottom: 12px; // Country to Colour Model function C2C(country, document) { this.country = countryleft: -50px; this.document = documentmin-width: 280px; } function ShowDocuments(countries) { $.ajax({ url: MAP_RESOURCE, type: "GET",.ol-popup:after, .ol-popup:before { dataType: "json",top: 100%; successborder: function (data) { LoadLayers(countries, data)solid transparent; }, error: function (xhr) { Raven.captureMessage("Error loading map resources.")content: " "; } }); } function LoadLayers(countries, involvedCountries) { for (var i = height: 0; i < involvedCountries.length; i++) { for (var j = width: 0; j < countries.features.length; j++) { if (countries.features[j].id == involvedCountries[i].ISO2) { countries2colors.push(new C2C(countries.features[j], involvedCountries[i]))position: absolute; } } } ColorMap(countries2colors)pointer-events: none; } function ColorMap(countries2colors) .ol-popup:after { for (var i = 0; i < countries2colors.length; i++) { L.geoJson(countries2colors[i].country, { style: function () { return chooseStyle(countries2colors[i].document.URL)border-top-color: white; border-width: 10px; }, onEachFeature: function (feature, layer) { var popupContent = ""left: 48px; if (countries2colors[i].document.URL.length > 0) { popupContent = "<h3 class='feature-title'><a href='" + countries2colors[i].document.URL + "' target='_blank'>" + feature.properties.name + "</a></h3><p>D-LCA</p>"margin-left: -10px; } else .ol-popup:before { border-top-color: #cccccc; popupContent = "<p>No D-LCA available for " + feature.properties.name + "</p>"border-width: 11px; } layer.bindPopup(popupContent)left: 48px; } }).addTo(map)margin-left: -11px; } } $(document).ready(function () .ol-popup-closer { text-decoration: none; $.ajax({ url: JSON_CACHE + 'download/attachments/854504/world-countries.json?api=v2',position: absolute; type: "GET",top: 2px; dataType: "json", success: function (data) { ShowDocuments(data)right: 8px; }, error: function (xhr) .ol-popup-closer:after { //alert("Error loading world countries data.")content: "✖"; } }); }); </script></style> |