Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/README.md

Forked from tmcw/README.md
Created Nov 24, 2017
Embed
What would you like to do?
Leaflet With simplestyle Markers
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
/* configure the size of the map */
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<script>
var map = L.map('map').setView([37.9, -77], 10);
// add the OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
var gj = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
coordinates: [-77, 37.9],
type: 'Point'
},
properties: {
'marker-color': '#000',
'marker-symbol': 'star-stroked',
'marker-size': 'large',
'title': 'Example Marker',
'description': 'This is a single marker.'
}
}, {
type: 'Feature',
geometry: {
coordinates: [-77.1, 37.8],
type: 'Point'
},
properties: {
'marker-color': '#f00',
'marker-symbol': 'star',
'marker-size': 'small',
'title': 'Example Marker',
'description': 'This is a single marker.'
}
}]
};
// See http://github.com/mapbox/simplestyle-spec
(new L.GeoJSON(gj, {
pointToLayer: function(f, latlon) {
var sizes = {
small: [20, 50],
medium: [30, 70],
large: [35, 90]
};
var fp = f.properties || {};
var size = fp['marker-size'] || 'medium';
var symbol = (fp['marker-symbol']) ? '-' + fp['marker-symbol'] : '';
var color = fp['marker-color'] || '7e7e7e';
color = color.replace('#', '');
var url = 'http://ws.webgeodatavore.com/v4/marker/' +
'pin-' +
// Internet Explorer does not support the `size[0]` syntax.
size.charAt(0) + symbol + '+' + color +
((window.devicePixelRatio === 2) ? '@2x' : '') +
'.png';
return new L.Marker(latlon, {
icon: new L.icon({
iconUrl: url,
iconSize: sizes[size],
iconAnchor: [sizes[size][0] / 2, sizes[size][1] / 2],
popupAnchor: [sizes[size][0] / 2, 0]
})
});
}
})).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.