96 lines
3.2 KiB
HTML
96 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Load SVG from URL</title>
|
|
<meta charset='utf-8'>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css' />
|
|
<script src='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js'></script>
|
|
|
|
<script src="../dist/maplibre-gl-svg.js"></script>
|
|
|
|
<style>
|
|
body { margin: 0; padding: 0; }
|
|
html, body { height: 100%; }
|
|
#map { position: relative; width:100%; height:100%; }
|
|
fieldset { position: absolute; top: 10px; left: 10px; width: 300px;z-index: 1; background-color: white;}
|
|
legend {background-color: white;border-radius: 5px;border:1px solid #000;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
|
|
<fieldset>
|
|
<legend>Load SVG from URL</legend>
|
|
This sample shows how to load an SVG from a URL into the map and display it as a symbol.
|
|
</fieldset>
|
|
|
|
<script>
|
|
var marker, svgManager;
|
|
|
|
const map = new maplibregl.Map({
|
|
container: 'map',
|
|
style: {
|
|
'version': 8,
|
|
'sources': {
|
|
'osm-tiles': {
|
|
'type': 'raster',
|
|
'tiles': [ 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' ],
|
|
'tileSize': 256,
|
|
'attribution': '© <a href="https://www.openstreetmap.org/about" target="_blank">OpenStreetMap</a>'
|
|
}
|
|
},
|
|
'layers': [
|
|
{
|
|
'id': 'osm-tiles',
|
|
'type': 'raster',
|
|
'source': 'osm-tiles',
|
|
'minzoom': 0,
|
|
'maxzoom': 19
|
|
}
|
|
]
|
|
},
|
|
zoom: 2
|
|
});
|
|
|
|
map.on('load', () => {
|
|
//Create a new instance of the SVG manager.
|
|
svgManager = new maplibregl.SvgManager(map);
|
|
|
|
//Load an SVG templated icon into the map.
|
|
svgManager.add('myTemplatedImage', '../assets/Smiley_face_changed.svg').then(() => {
|
|
|
|
//Optionally set the max width/height of the image.
|
|
//svgManager.add('myTemplatedImage', '../assets/Smiley_face_changed.svg', 30, 30).then(() => {
|
|
|
|
//Add a layer to display a filled polygon.
|
|
map.addLayer({
|
|
'id': 'symbol-layer',
|
|
'type': 'symbol',
|
|
'source': {
|
|
'type': 'geojson',
|
|
'data': {
|
|
'type': 'FeatureCollection',
|
|
'features': [
|
|
{
|
|
'type': 'Feature',
|
|
'properties': {
|
|
},
|
|
'geometry': {
|
|
'type': 'Point',
|
|
'coordinates': [0,0]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
'layout': {
|
|
//Reference the templated icon.
|
|
'icon-image': 'myTemplatedImage'
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |