Use "map" as HTML element id everywhere (#7696)

This commit is contained in:
William Entriken
2021-10-29 09:34:17 -04:00
committed by GitHub
parent b4801788ff
commit 671c7c8bcb
6 changed files with 12 additions and 12 deletions

View File

@ -19,7 +19,7 @@
if(mapDiv) mapDiv.parentNode.removeChild(mapDiv); // This will destroy the map div
// create new map div
var randomDivId = 'mapId' + new Date().getTime();
var randomDivId = 'map' + new Date().getTime();
mapDiv = document.createElement('div');
mapDiv.id = randomDivId;
mapDiv.style.height = '200px';

View File

@ -3,10 +3,10 @@ layout: tutorial_frame
title: Quick Start
customMapContainer: "true"
---
<div id='mapid' style='width: 600px; height: 400px;'></div>
<div id='map' style='width: 600px; height: 400px;'></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
var mymap = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,

View File

@ -3,10 +3,10 @@ layout: tutorial_frame
title: Quick Start
customMapContainer: "true"
---
<div id='mapid' style='width: 600px; height: 400px;'></div>
<div id='map' style='width: 600px; height: 400px;'></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
var mymap = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,

View File

@ -3,10 +3,10 @@ layout: tutorial_frame
title: Quick Start
customMapContainer: "true"
---
<div id='mapid' style='width: 600px; height: 400px;'></div>
<div id='map' style='width: 600px; height: 400px;'></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
var mymap = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,

View File

@ -3,10 +3,10 @@ layout: tutorial_frame
title: Quick Start
customMapContainer: "true"
---
<div id='mapid' style='width: 600px; height: 400px;'></div>
<div id='map' style='width: 600px; height: 400px;'></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
var mymap = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,

View File

@ -28,11 +28,11 @@ Before writing any code for the map, you need to do the following preparation st
* Put a `div` element with a certain `id` where you want your map to be:
<div id="mapid"></div>
<div id="map"></div>
* Make sure the map container has a defined height, for example by setting it in CSS:
<pre><code class="css">#mapid { height: 180px; }</code></pre>
<pre><code class="css">#map { height: 180px; }</code></pre>
Now you're ready to initialize the map and do some stuff with it.
@ -44,7 +44,7 @@ Now you're ready to initialize the map and do some stuff with it.
Let's create a map of the center of London with pretty Mapbox Streets tiles. First we'll initialize the map and set its view to our chosen geographical coordinates and a zoom level:
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
var mymap = L.map('map').setView([51.505, -0.09], 13);
By default (as we didn't pass any options when creating the map instance), all mouse and touch interactions on the map are enabled, and it has zoom and attribution controls.