@binary-constructions/semantic-map
Version:
A markup wrapper for the Leaflet map API
259 lines (241 loc) • 15.4 kB
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>semantic-map – showcase</title>
<style type="text/css">
html {
margin: 0 auto;
max-width: 60em;
padding-bottom: 3em;
}
h2 {
padding-top: 1ex;
border-top: 1px solid black;
}
.semantic-map {
height: 200px;
border: 1px black solid;
}
.semantic-map__property:not([data-semantic-map-property-value]),
.semantic-map__attribution {
display: none;
}
</style>
<link rel="stylesheet" href="./leaflet/leaflet.css">
<script src="./leaflet/leaflet.js"></script>
<link rel="stylesheet" href="./leaflet.markercluster/MarkerCluster.css">
<link rel="stylesheet" href="./leaflet.markercluster/MarkerCluster.Default.css">
<script src="./leaflet.markercluster/leaflet.markercluster.js"></script>
<script type="text/javascript" src="semantic-map.js"></script>
<script>
window.onload = function() {
semanticMap.mount(
maps => {
console.log("Maps mounted!");
console.log("We can use the returned Maps object to interact with the API:");
console.log(maps)
console.log("In this showcase we do this to define global click handlers for the map and features, for example.")
maps.Renderer.prototype.onMapClick = details => {
console.log("Map clicked:");
console.log(details);
};
maps.Renderer.prototype.onFeatureClick = feature => {
console.log("Feature clicked:");
console.log(feature);
};
maps.parser.nodeFilter = node => !(node.classList && node.classList.contains("hide"));
console.log("We also make use of it to dynamically create/modify a map.")
document.getElementById("modify-map-button").addEventListener("click", () => { modify_map(); maps.refresh(); }, false);
}
);
}
const next_feature = (() => {
let coordinates = [13.4, 52.52];
return () => {
const feature = document.createElement('div');
feature.className = 'semantic-map__feature semantic-map__geometry';
feature.dataset.semanticMapGeometryType = 'Point';
feature.dataset.semanticMapGeometryCoordinates = '[' + coordinates + ']';
coordinates[0] += 0.01;
return feature;
};
})();
function modify_map() {
var map = document.getElementById('dynamically-created-map');
if (!map) {
map = document.createElement('div');
map.id = 'dynamically-created-map';
map.className = 'semantic-map';
map.dataset.semanticMapTileUrlTemplate = 'https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibGFycy1pIiwiYSI6ImNqeXVka21majBjc3MzaHBnb3Q3ZGFlMzQifQ.M3-AJpJSuuIlHYhCZMvprw';
map.dataset.semanticMapInitialCenter = '[13.4, 52.52]';
map.dataset.semanticMapInitialZoom = '12';
map.dataset.semanticMapFitFeatures='true';
map.dataset.semanticMapEnableClustering='true';
document.getElementById('dynamically-created-map-container').append(map);
}
map.append(next_feature());
}
</script>
</head>
<body>
<h1>A Showcase of semantic-map Features</h1>
<p>Below you'll find a few examples of maps defined using markup
and <a href="https://gitlab.com/binary-constructions/semantic-map">semantic-map</a>.
Have a look at the source of the page to see how the maps are
defined!</p>
<h2>The default map without anything else:</h2>
<div class="semantic-map" data-semantic-map-tile-url-template="https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibGFycy1pIiwiYSI6ImNqeXVka21majBjc3MzaHBnb3Q3ZGFlMzQifQ.M3-AJpJSuuIlHYhCZMvprw">
</div>
<p>Even the attribution is missing!</p>
<h2>After adding attribution, initial center and zoom as well as a feature:</h2>
<div class="semantic-map" data-semantic-map-tile-url-template="https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibGFycy1pIiwiYSI6ImNqeXVka21majBjc3MzaHBnb3Q3ZGFlMzQifQ.M3-AJpJSuuIlHYhCZMvprw" data-semantic-map-initial-center="[13.4, 52.52]" data-semantic-map-initial-zoom="12">
<div class="semantic-map__feature">
<div class="semantic-map__geometry" data-semantic-map-geometry-type="Point" data-semantic-map-geometry-coordinates="[13.4, 52.52]"></div>
</div>
<div class="semantic-map__attribution">
Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>
</div>
</div>
<p>Still not too impressive, but it's a start!</p>
<h2>With another feature, popup content and max/min-zoom defined:</h2>
<div class="semantic-map" data-semantic-map-tile-url-template="https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibGFycy1pIiwiYSI6ImNqeXVka21majBjc3MzaHBnb3Q3ZGFlMzQifQ.M3-AJpJSuuIlHYhCZMvprw" data-semantic-map-initial-center="[13.4, 52.52]" data-semantic-map-initial-zoom="12" data-semantic-map-max-zoom="13" data-semantic-map-min-zoom="11">
<div class="semantic-map__feature semantic-map__geometry" data-semantic-map-geometry-type="Point" data-semantic-map-geometry-coordinates="[13.4, 52.52]">
<div class="semantic-map__property" data-semantic-map-property-key="popup">
<h4>Hey, I'm a Point!</h4>
<p>I mark the initial center of the map.</p>
</div>
</div>
<div class="semantic-map__feature semantic-map__geometry semantic-map__property" data-semantic-map-geometry-type="Point" data-semantic-map-geometry-coordinates="[13.419402, 52.503425]" data-semantic-map-property-key="popup">
<h4>I'm another Point!</h4>
<p>I mark another random(?) spot on the map!</p>
</div>
<div class="semantic-map__attribution">
Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>
</div>
</div>
<p>There's also some merging of elements going on in the background (look at the source!)</p>
<h2>Moving on beyond just points:</h2>
<div class="semantic-map" data-semantic-map-tile-url-template="https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibGFycy1pIiwiYSI6ImNqeXVka21majBjc3MzaHBnb3Q3ZGFlMzQifQ.M3-AJpJSuuIlHYhCZMvprw" data-semantic-map-initial-center="[13.411914, 52.497644]" data-semantic-map-initial-zoom="12">
<!-- Showing off another way of nesting feature elements... mostly just because it's possible :p -->
<div class="semantic-map__feature hide">
<div class="semantic-map__geometry semantic-map__property" data-semantic-map-geometry-type="Point" data-semantic-map-geometry-coordinates="[13.419402, 52.503425]" data-semantic-map-property-key="popup">
<h4>I'm the only point left!</h4>
<p>But where am I?</p>
</div>
</div>
<div class="semantic-map__feature semantic-map__geometry" data-semantic-map-geometry-type="MultiPolygon" data-semantic-map-geometry-coordinates="[[[[13.364000000000001,52.495000000000005],[13.367000000000001,52.503],[13.375999999999999,52.512],[13.387,52.511000000000003],[13.398,52.512999999999998],[13.411,52.511000000000003],[13.413,52.509],[13.425000000000001,52.509],[13.427,52.512],[13.43,52.512999999999998],[13.447000000000001,52.503999999999998],[13.455,52.502000000000002],[13.457000000000001,52.499000000000002],[13.457000000000001,52.496000000000002],[13.455,52.494],[13.446,52.491],[13.442,52.486000000000004],[13.437000000000001,52.486000000000004],[13.429,52.489000000000004],[13.429,52.486000000000004],[13.425000000000001,52.481999999999999],[13.41,52.484000000000002],[13.41,52.481000000000002],[13.407999999999999,52.478999999999999],[13.393000000000001,52.480000000000004],[13.391,52.481999999999999],[13.370000000000001,52.481000000000002],[13.368,52.483000000000004],[13.368,52.487000000000002],[13.370000000000001,52.489000000000004],[13.365,52.490000000000002],[13.364000000000001,52.495000000000005]]]]">
<div class="semantic-map__property" data-semantic-map-property-key="style" data-semantic-map-property-parse="json" data-semantic-map-property-value='{ "color": "red", "fillColor": "#f03", "fillOpacity": 0.2 }'></div>
<div class="semantic-map__property" data-semantic-map-property-key="popup">
<h4>What is this place?</h4>
<p>Does it look dangerous to you, too?</p>
</div>
</div>
<div class="semantic-map__attribution">
Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>
</div>
</div>
<p>The MultiPolygon also has a custom style applied.</p>
<h2>Doing clusters:</h2>
<div class="semantic-map" data-semantic-map-tile-url-template="https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibGFycy1pIiwiYSI6ImNqeXVka21majBjc3MzaHBnb3Q3ZGFlMzQifQ.M3-AJpJSuuIlHYhCZMvprw" data-semantic-map-fit-features="true" data-semantic-map-enable-clustering="true">
<div class="semantic-map__features" data-semantic-map-features='[
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.129800814819, 52.389027019434 ] },
"properties": { "popup": "Bernhard-Beyer-Straße 12" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.134464, 52.4134719 ] },
"properties": { "popup": "Ulricistraße 32" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.138956, 52.4101427 ] },
"properties": { "popup": "Stölpchenweg 7" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.14582, 52.41207 ] },
"properties": { "popup": "Grüner Weg 15" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.14937, 52.41348 ] },
"properties": { "popup": "Alsenstraße 28" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.1504, 52.41653 ] },
"properties": { "popup": "Hohenzollernstraße 24" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.15231, 52.41654 ] },
"properties": { "popup": "Hohenzollernstraße 6" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.153309737434, 52.417399763814 ] },
"properties": { "popup": "Petzower Straße 13" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.15525, 52.4237 ] },
"properties": { "popup": "Hugo-Vogel-Straße 38-42" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.155917742922, 52.420857163559 ] },
"properties": { "popup": "Hugo-Vogel-Straße 10" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.159584047816, 52.426455515751 ] },
"properties": { "popup": "Straße zum Löwen 12" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.1599093, 52.4181534 ] },
"properties": { "popup": "Wernerstraße 10" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.1604, 52.41821 ] },
"properties": { "popup": "Wernerstraße 6" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.1606, 52.41804 ] },
"properties": { "popup": "Wernerstraße 7" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.161304165745, 52.422409258081 ] },
"properties": { "popup": "Straße zum Löwen 19" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.161941311674, 52.419256250863 ] },
"properties": { "popup": "Conradstraße 5" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.18771362, 52.420851240039 ] },
"properties": { "popup": "Dreilindenstraße 52" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.19327, 52.42735 ] },
"properties": { "popup": "Cimbernstraße 3" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.1951268, 52.4339066 ] },
"properties": { "popup": "Spanische Allee 166" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.1954409, 52.4255784 ] },
"properties": { "popup": "Cimbernstraße 13" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.19585, 52.43135 ] },
"properties": { "popup": "Normannenstraße 2" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.1959046, 52.4277096 ] },
"properties": { "popup": "Teutonenstraße 15" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.1981716, 52.42681 ] },
"properties": { "popup": "Teutonenstraße 23" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.19829, 52.42963 ] },
"properties": { "popup": "An der Rehwiese 12" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.2015862, 52.4303906 ] },
"properties": { "popup": "Schopenhauerstraße 97" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.203416120377, 52.423833403678 ] },
"properties": { "popup": "Potsdamer Chaussee 48" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.203416120377, 52.423839946288 ] },
"properties": { "popup": "Potsdamer Chaussee 48" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.203416120377, 52.423853031507 ] },
"properties": { "popup": "Potsdamer Chaussee 48" } },
{ "type": "Feature",
"geometry": { "type": "Point", "coordinates": [ 13.203448306885, 52.423839946288 ] },
"properties": { "popup": "Potsdamer Chaussee 48" } }
]'>
</div>
<div class="semantic-map__attribution">
Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>
</div>
</div>
<p>The map features here are also not defined individually but as a list of GeoJSON "Feature" objects instead.</p>
<h2>A map created (and then modified) dynamically via JavaScript:</h2>
<div id="dynamically-created-map-container">
</div>
<p><button id="modify-map-button">Click here</button> to first create the map and then add features to it.</p>
</body>
</html>