2020-04-06 03:03:19 +00:00
|
|
|
<!DOCTYPE html>
|
2020-05-12 16:45:55 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>Add custom icons with Markers</title>
|
|
|
|
|
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
|
|
|
|
|
<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
|
|
|
|
|
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet" />
|
|
|
|
|
<style>
|
|
|
|
|
body { margin: 0; padding: 0; }
|
|
|
|
|
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
|
|
|
|
|
</style>
|
2020-04-06 03:03:19 +00:00
|
|
|
</head>
|
2020-05-12 16:45:55 +00:00
|
|
|
<body>
|
|
|
|
|
<style>
|
|
|
|
|
.marker {
|
|
|
|
|
display: block;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding: 0;
|
2020-04-06 03:03:19 +00:00
|
|
|
}
|
2020-05-12 16:45:55 +00:00
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<div id="map"></div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
mapboxgl.accessToken = 'pk.eyJ1IjoiaHVtYW5vIiwiYSI6IlgyRTFNdFEifQ.OmQBXmcVg_zq-vMpr8P5vQ';
|
|
|
|
|
//var geojson = 'http://localhost/tupali/cache/gatos.geojson';
|
|
|
|
|
|
|
|
|
|
var map = new mapboxgl.Map({
|
|
|
|
|
container: 'map',
|
|
|
|
|
style: 'mapbox://styles/mapbox/streets-v11',
|
|
|
|
|
center: [-65.017, -16.457],
|
|
|
|
|
zoom: 5
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
map.addSource('geojson', {
|
|
|
|
|
type: 'geojson',
|
|
|
|
|
data: 'http://localhost/tupali/cache/gatos.geojson'
|
|
|
|
|
});
|
|
|
|
|
// add markers to map
|
|
|
|
|
geojson.features.forEach(function(marker) {
|
|
|
|
|
// create a DOM element for the marker
|
|
|
|
|
var el = document.createElement('div');
|
|
|
|
|
el.className = 'marker';
|
|
|
|
|
//el.style.backgroundImage ='url(https://placekitten.com/g/' +marker.properties.iconSize.join('/') +'/)';
|
|
|
|
|
el.style.backgroundImage ='url(https://tupale.co/milfs/images/secure/?file=150/da6d16547658ebc06c5378b30d1ee4bf.png)';
|
|
|
|
|
el.style.width = marker.properties.iconSize[0] + 'px';
|
|
|
|
|
el.style.height = marker.properties.iconSize[1] + 'px';
|
|
|
|
|
|
|
|
|
|
el.addEventListener('click', function() {
|
|
|
|
|
window.alert(marker.properties.message);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// add marker to map
|
|
|
|
|
new mapboxgl.Marker(el)
|
|
|
|
|
.setLngLat(marker.geometry.coordinates)
|
|
|
|
|
.addTo(map);
|
|
|
|
|
});
|
|
|
|
|
</script>
|
2020-04-06 03:03:19 +00:00
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
