I'm new in mapquest, i want to create a web page where we can see a map. My example work's fine if i use a single "div", but if i use a "div" inside a "div", the maps don't loads compleatly.
working sample:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> Hello World!</title>
<style type="text/css">
#mapa{ width: 800px; height: 600px;font-family:Arial }
</style>
</head>
<body >
<div id="mapa"></div>
<script type="text/javascript">
L.mapquest.key = 'KEY';
map= L.mapquest.map( 'mapa' , {
center: [38.58778619815616,-9.041748046875],
layers: L.mapquest.tileLayer('hybrid'),
zoom: 18
});
L.marker([38.58778619815616,-9.041748046875], {
icon: L.mapquest.icons.marker(),
draggable: false
}).bindPopup('Denver, CO').addTo(map);
L.circle([38.8339, -104.8214], { radius: 20000 }).addTo(map);
var denverLatLngs = [
[36.99, -102.05],
[37, -109.05],
[41, -109.05],
[41, -102.05]
];
L.polygon(denverLatLngs, {color: 'red'}).addTo(map);
</script>
</body>
And i want to put it inside a container:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> Hello World!</title>
<style type="text/css">
#mapa{ width: 800px; height: 600px;font-family:Arial }
</style>
</head>
<body >
<div id="container">
<div id="mapa"></div>
</div>
<script type="text/javascript">
L.mapquest.key = 'KEY';
map= L.mapquest.map( 'mapa' , {
center: [38.58778619815616,-9.041748046875],
layers: L.mapquest.tileLayer('hybrid'),
zoom: 18
});
L.marker([38.58778619815616,-9.041748046875], {
icon: L.mapquest.icons.marker(),
draggable: false
}).bindPopup('Denver, CO').addTo(map);
L.circle([38.8339, -104.8214], { radius: 20000 }).addTo(map);
var denverLatLngs = [
[36.99, -102.05],
[37, -109.05],
[41, -109.05],
[41, -102.05]
];
L.polygon(denverLatLngs, {color: 'red'}).addTo(map);
</script>
</body>
Related
I'm using Mapbox gl js into a website to show safari's map. I created my mapbox account and my API token and i'm experiencing a browser error:
SecurityError: The operation is insecure. cecb579d-d0ad-424a-9e7d-bf4c7353d904:1
If i try to open the source debug blob i get a blank page :(
Thx in advance
here is the code:
<html lang="it">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
<script src="https://unpkg.com/#turf/turf#6/turf.min.js"></script>
</head>
<body>
<div id="map"></div>
<div class="overlay">
<button id="replay">Replay</button>
</div>
<!-- here i used the defoult API key -->
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYWxleDk1IiwiYSI6ImNrcTRlajRrajE3cnIydnFyMGMwN3cyeG4ifQ.jU5odECEGnFPWjflz37KhA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [36, -1],
zoom: 7.3
});
// 1 Nairobi, Kenya
var marker1 = new mapboxgl.Marker({
color: "#737C56",
draggable: false
})
.setLngLat([36.70, -1.30])
.setPopup(new mapboxgl.Popup({
className: 'pop-up',
closeButton: false,
closeOnClick: true
})
.setText('Nairobi, Kenya'))
.addTo(map);
// 2 The Great Rift Valley View Point, B 3, Kenya
var marker2 = new mapboxgl.Marker({
color: "#737C56",
draggable: false
})
.setLngLat([36.58, -1.08])
.setPopup(new mapboxgl.Popup({
className: 'pop-up',
closeButton: false,
closeOnClick: true
})
.setText('The Great Rift Valley View Point, B 3, Kenya'))
.addTo(map);
[...]
</script>
</body>
<html> ```
I've removed some scripts from your code and it seems to work fine. please refer to this link
<html lang="it">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id="map"></div>
<div class="overlay">
<button id="replay">Replay</button>
</div>
<!-- here i used the defoult API key -->
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYWxleDk1IiwiYSI6ImNrcTRlajRrajE3cnIydnFyMGMwN3cyeG4ifQ.jU5odECEGnFPWjflz37KhA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [36, -1],
zoom: 7.3
});
// 1 Nairobi, Kenya
var marker1 = new mapboxgl.Marker({
color: "#737C56",
draggable: false
})
.setLngLat([36.70, -1.30])
.setPopup(new mapboxgl.Popup({
className: 'pop-up',
closeButton: false,
closeOnClick: true
})
.setText('Nairobi, Kenya'))
.addTo(map);
// 2 The Great Rift Valley View Point, B 3, Kenya
var marker2 = new mapboxgl.Marker({
color: "#737C56",
draggable: false
})
.setLngLat([36.58, -1.08])
.setPopup(new mapboxgl.Popup({
className: 'pop-up',
closeButton: false,
closeOnClick: true
})
.setText('The Great Rift Valley View Point, B 3, Kenya'))
.addTo(map);
</script>
</body>
<html>
I have the following jsfiddle
https://jsfiddle.net/3qge41b0/
$('#myP').click(function() {
GetMap();
});
function GetMap() {
var text = '<html lang="en"> <head> <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <style> .map { height: 400px; width: 100%; } </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script' + '> <title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <div id="map" class="map"></div> <script type="text/javascript" defer=true> function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; $(function() { LoadMap() });</script' + '> </body></html>';
$("#myDIV").html(text);
}
$('#myP2').click(function() {
GetMap2();
});
function GetMap2() {
var text = '<html lang="en"> <head> <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <style> .map { height: 400px; width: 100%; } </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script' + '> <title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <div id="map" class="map"></div> <script type="text/javascript" defer=true> function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; setTimeout( function() { LoadMap() }, 10);</script' + '> </body></html>';
$("#myDIV").html(text);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>My Web Page</h1>
<button id="myP">Click me.</button>
<button id="myP2">Or Click me.</button>
<div id="myDIV" style="width=100%;height=100%">This is a div element.</div>
</body>
</html>
$('#myP').click(function() { GetMap(); });
function GetMap()
{
var text = '<html lang="en"> <head> <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <style> .map { height: 400px; width: 100%; } </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script'+'> <title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <div id="map" class="map"></div> <script type="text/javascript" defer=true> function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; $(function() { LoadMap() });</script'+'> </body></html>';
$("#myDIV").html(text);
}
$('#myP2').click(function() { GetMap2(); });
function GetMap2()
{
var text = '<html lang="en"> <head> <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <style> .map { height: 400px; width: 100%; } </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script'+'> <title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <div id="map" class="map"></div> <script type="text/javascript" defer=true> function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; setTimeout( function() { LoadMap() }, 10);</script'+'> </body></html>';
$("#myDIV").html(text);
}
As you can see its just a div which is loaded dynamically with a html string.
The problem is, that the first button ends up in an error, because the ol.js library seems not be loaded. If I put a timeout in, it works (GetMap2). Also if you hit the first button a second time.
But I find this is rather a workaround than a solution. What if the connection is slow and the library takes more than 100 ms to load?
Is there a possibility to get the event when the library is loaded? I tried a lot of different ways of appending or adding the html string. Nothing worked. The ready or load event on the ol.js is not firing correctly.
Does anybody have an idea how to solve this?
Kind regards
Nico
With jquery you can use getScript to ensure the script is fully loaded.
$.getScript("https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js", function(){ LoadMap(); });
https://api.jquery.com/jQuery.getScript/
Example: https://jsfiddle.net/usc23yt6/#&togetherjs=9NyczI3xx7
I've created a HTML file which displays a map using leaflet following this tutorial.
http://build-failed.blogspot.co.uk/2012/11/zoomable-image-with-leaflet.html
My HTML code is as follows...
<!DOCTYPE html>
<html>
<head>
<title>eso1119a</title>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script>
function init() {
var mapMinZoom = 0;
var mapMaxZoom = 3;
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
crs: L.CRS.Simple
}).setView([0, 0], mapMaxZoom);
var mapBounds = new L.LatLngBounds(
map.unproject([0, 1280], mapMaxZoom),
map.unproject([1280, 0], mapMaxZoom));
map.fitBounds(mapBounds);
L.tileLayer('{z}/{x}/{y}.png', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
bounds: mapBounds,
attribution: 'Rendered with MapTiler',
noWrap: true
}).addTo(map);
}
</script>
<style>
html, body, #map { width:100%; height:100%; margin:0; padding:0; }
</style>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
How can I embedd the map onto my blog (tumblr) in the same way this user has? http://blog.thematicmapping.org/2013/06/showing-zoomify-images-with-leaflet.html
You need to upload the folder with the zoomable image generated by MapTiler to a webhosting.
Tutorials for how to make it are available - hosting is possible for free with Dropbox, or with other services:
http://www.maptiler.com/how-to/hosting/
(A different web-hosting provider for the map is required as Tumblr does not support static files hosting anymore..).
After you do this then just create a new post in Tumblr, change for the post the "Text editor" and choose "HTML" and include a code like:
<iframe src="http://yourserver.com/path-to-your-folder/leaflet.html"
style="width: 100%; height: 450px;"></iframe>
See this Thumblr sample post:
http://klokancz.tumblr.com/post/129075897775/maptiler-embedding-test
I'm trying to set up the google map api on my website so for part of a delivery service I'm offering. I copied the code directly from the sample on developers.google.com but for some reason my map wont load on my page!Ive gone through the code multiple times and cant get it to load...HELP!
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPiGhEEN1WjNHOtVoOMufbwsj_thBse2w&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.mapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
The html:
<body onload="initialize()">
<div class="map-canvas" style= "height: 100%">
</div>
</body>
I get a javascript error: Uncaught TypeError: Cannot read property 'ROADMAP' of undefined
This:
mapTypeId: google.maps.mapTypeId.ROADMAP,
Should be:
mapTypeId: google.maps.MapTypeId.ROADMAP,
The major problem is: Uncaught TypeError: Cannot read property 'offsetWidth' of null because your page doesn't have a div with id="map-canvas":
<div class="map-canvas" style= "height: 100%">
Should be:
<div id="map-canvas" style= "height: 100%;">
You are also calling initialize twice, change:
<body onload="initialize()">
To:
<body>
Complete page (works locally):
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body >
<div id="map-canvas" style= "height: 100%;">
</div>
</body>
</html>
I see three issues
you use getElementById, but you give your div a class of map-canvas
it's *M*apTypeId (capital M)
you need to give your map-canvas div a fixed height
Also, since you are using addDomListener, it's unnecessary to also have an onload event on the body tag too. I would just use addDomListener.
<!DOCTYPE html>
<head>
<title>Google Maps</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPiGhEEN1WjNHOtVoOMufbwsj_thBse2w&sensor=true">
</script>
<style>
#map-canvas{
height: 400px;
}
</style>
</head>
<body>
<div id="map-canvas">
</div>
</body>
<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</html>
I am using the sample code from google as below. When I try to zoom out to minimum, there appear about 8 maps. WHat is wrong with it? As my understanding, there should only one world map when zoom out to minimum? Is there any parameter I can set?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAoQaaN9DLOjrVigdieAL_a1ZkFapkZ8_Y&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
map.setZoom(3);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>