I'm using mapbox api.
I would ultimately like to display mapbox map in node.js sever.
Only html that contains texts is working, html that contains map script isn't working.
How do I solve this problem?
(example - index.html work but mapWeb.html doesn't work in index.js)
[index.js]
var http = require('http');
var fs = require('fs');
http.createServer(function (request, response) {
request.on('readable', function () {
request.read(); // throw away the data
});
request.on('end', function () {
response.writeHead(200, {
'Content-Type': 'text/html'
});
response.write(fs.readFileSync("./index.html"));
response.end('Hello HTTP!');
});
}).listen(8080);
[index.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
Hello Node Server Routing Is Working.
</body>
</html>
[mapWeb.html]
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='C:\Users\YJH\Documents\Visual Studio 2017\Projects\mapServerTest\mapServerTest\node_modules\mapbox-gl\dist\mapbox-gl.js'></script>
<link href='C:\Users\YJH\Documents\Visual Studio 2017\Projects\mapServerTest\mapServerTest\node_modules\mapbox-gl\dist\mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiamhqaGpoOTYiLCJhIjoiY2oxaGpjMjF2MDAydDJ2b2F5cXFlM3QwYiJ9.CDgM2v_KGqdegjs-bK-Cnw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
center: [-74.50, 40], // starting position
zoom: 9 // starting zoom
});
</script>
</body>
</html>
Related
I have to add a click handler to the button provided that will retrieve the users current location using the geolocation api.
Here's my code, I'm trying to use geolocation to set the current location of the user to the map but the button for some reasons does not work. Can anyone point out what I'm doing wrong and help me out?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<style>
#mapid { height: 600px; }
</style>
<script>
const Mapping = {
map : null,
initializeMap : () => {
Mapping.map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
subdomains: ['a','b','c']
}).addTo( Mapping.map );
},
resetLocation : ({lat,lon}) => {
Mapping.map.setView([lat,lon], 13);
}
}
window.onload = () => {
Mapping.initializeMap();
userCode();
}
function userCode() {
// JS CODE START
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
let pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
Mapping.setPosition(pos);
Mapping.open(Mapping.map);
Mapping.map.setPosition(pos);
})
}
// JS CODE END
}
</script>
</head>
<body>
<!-- HTML CODE GOES HERE-->
<button onclick="userCode()">Get Location</button>
<div id="mapid" style="width: 600px; height: 400px;"></div>
</body>
</html>
Use
Mapping.resetLocation({lat:pos.lat,lon:pos.lng});
Instead of
Mapping.setPosition(pos);
I can't see the google map on my monitor, but when I put all the code in a single html file and use script tags it works.
Index.html file is:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIpWlWVDAqVEyW20SX6MfThL-iz9IWeQA&callback=initMap"
></script>
</body>
</html>
Script.js file is:
function initMap() {
var map;
map = new google.maps.Map(document.getElementById('map'),
{
center: { lat: -34.397,
lng: 150.644
},
zoom: 8
}
);
}
style.css file is:
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map { width:100%; height:200px;}
or to fill whole window:
#map { width:100%; min-height:100%;}
if it's first child with min-height property. PS. You can also try to add overflow:hidden; for second example.
According to the documentation : Google Maps APIs, just put your JavaScript (script.js) after your map.
<div id="map"></div>
<script src="script.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIpWlWVDAqVEyW20SX6MfThL-iz9IWeQA&callback=initMap" async defer></script>
Edit : Don't forget "async defer" at the end of the second script.
I consolidated your HTML and it works fine. For some reason, your callback function is not working when in a separate file.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
function initMap() {
var map;
map = new google.maps.Map(document.getElementById('map'),
{
center: { lat: -34.397, lng: 150.644},
zoom: 8
}
);
}
</script>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIpWlWVDAqVEyW20SX6MfThL-iz9IWeQA&callback=initMap"
></script>
</body>
</html>
When you execute script.js it tries to find the div with the id="map". But it's not initialized yet .So, you need to do two things:
Include the script.js file after your <div id="map"></div>
Call initMap() after the page has loaded. E.g. like this (at the end) <script>initMap()</script>
The rendered map appears blurry in Chrome Version 49.0.2623.110 m when using 100% Height in CSS.
I am using LeafletJS library version 0.7.7.
I only support zoom level 6,7 & 8 so at zoom level 6, it looks like this:
If I zoom even to max capability, which is 8, it looks quite blurry like this:
This is my index.html (implementation source):
<!doctype html>
<html lang="en">
<head>
<title>Europe Zoom Level 6 & 7</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="leaflet.css">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0;}
#map { height: 100% }
</style>
<script type="text/javascript" src="leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
(function () {
// Objects
var isOnline = false;
var map = L.map('map').setView([51.505, -0.09], 6);;
// Generate tile layer url
var tileLayerUrl = isOnline
? 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
: 'MapQuest/{z}/{x}/{y}.jpg';
// Set tile layer & add to map
L.tileLayer(tileLayerUrl, {
minZoom : 6,
maxZoom : 8,
attribution: '© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors'
})
.addTo(map);
// Test marker
L.marker([51.5, -0.09]).addTo(map)
.bindPopup("<b>Hello world!</b><br />I am a <u>html</u> popup.");
})();
</script>
</body>
</html>
Is there a fix for this?
On a separate note, In Internet Explorer (11) it looks crystal clear:
I am trying to load a leaflet map from a link. If I click the first link, the map loads, then if I click the second link, the map does not load. Both links call the same function. I cannot understand what is happening.
Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
</head>
<body>
OpenStreetMap<br>
Thunderforest<hr>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script>
<script>
function showMap(url){
var map = L.map('map').setView([-33.4387,-70.647], 14);
var mapLink = 'OpenStreetMap';
L.tileLayer(url, {
attribution: 'Map data © ' + mapLink,
maxZoom: 18,
}).addTo(map);
}
</script>
</body>
</html>
You are getting an error because your are trying to initialize the map container for a second. Here is how you can solve this:
<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
</head>
<body>
OpenStreetMap<br>
Thunderforest<hr>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script>
<script>
var map;
function showMap(url){
if(!map)
{
map = L.map('map').setView([-33.4387,-70.647], 14);
}
var mapLink = 'OpenStreetMap';
L.tileLayer(url, {
attribution: 'Map data © ' + mapLink,
maxZoom: 18,
}).addTo(map);
}
</script>
</body>
</html>
I am setting up a simple map program for a user to see locations on an embedded Google map. I have the map working, but I was wondering if there is a way for the user to input coordinates in AI2 then have the map center there.
Here is the HTML file I am using to display the map.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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?&sensor=true&language=en"></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
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', showPosition);
}
function showPosition(event) {
// display a marker on the map
marker = new google.maps.Marker({
position: event.latLng,
map: map,
icon: "./marker.png"
});
// print the selected position to the page title
var position = event.latLng.lat().toFixed(6) + ", " + event.latLng.lng().toFixed(6);
window.document.title = position;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Yes, that's possible.
You can use WebViewString to communicate values back and forth between your App and the WebViewer. In your App, you get and set the WebViewer.WebViewString properties. In your webviewer, you open to a page that has Javascript that references the window.AppInventor object, using its getWebViewString() and setWebViewString(text) methods.
See also the following snippet for a complete example.
<!doctype html>
<head>
<meta name="author" content="puravidaapps.com">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
</head>
<body>
<script>
document.write("The value from the app is<br />" + window.AppInventor.getWebViewString());
window.AppInventor.setWebViewString("hello from Javascript")
</script>
</body>
</html>