Upload New File

44e7bb11 · Boris Mericskay · 362ad0ea · 44e7bb11
Commit 44e7bb11 authored 4 years ago by Boris Mericskay
--- a/Basicmap.html
+++ b/Basicmap.html
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8" />
+<title>Change a map's style</title>
+<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+
+<script src="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.js"></script>
+  <link href="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.css" rel="stylesheet" />
+  
+<style>
+	body { margin: 0; padding: 0; }
+	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
+#marker {
+background-image: url('https://sites-formations.univ-rennes2.fr/mastersigat/images/75709127.png');
+background-size: cover;
+width: 50px;
+height: 50px;
+border-radius: 50%;
+cursor: pointer;
+}
+ 
+.mapboxgl-popup {
+max-width: 200px;
+}
+
+</style>
+</head>
+<body>
+
+ 
+<div id="map"></div>
+
+<script>
+
+// Map configuration 
+
+var map = new mapboxgl.Map({
+container: 'map',
+style: 'https://geoserveis.icgc.cat/contextmaps/osm-bright.json', //Basemap style
+zoom: 17, // Zoom
+center: [-1.696585806176717, 48.10838773178866], // Center
+pitch : 60, // Inclinaison
+bearing : 50 // Rotation
+});
+ 
+
+// create the popup
+var popup = new mapboxgl.Popup({ offset: 25 }).setText(
+'The great place of Rennes'
+);
+ 
+// create DOM element for the marker
+var el = document.createElement('div');
+el.id = 'marker';
+
+
+// create the marker
+new mapboxgl.Marker(el)
+.setLngLat([-1.696585806176717, 48.10838773178866])
+.setPopup(popup) // sets a popup on this marker
+.addTo(map);
+
+
+
+
+    // Add Navigation Control and Scale Map
+  
+map.addControl(new mapboxgl.NavigationControl({position: 'top-left'}));  
+  
+map.addControl(new mapboxgl.ScaleControl({position: 'bottom-right'}));
+  
+
+
+
+</script>
+ 
+</body>
+</html
\ No newline at end of file