Javascript: Polygon not showing on the map - javascript

Why polygon not showing on the map? I was trying to highlight a specific location using polygon but it is not showing on the map even though there is no error. here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js">
</script>
<style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
</style>
</head>
<body>
<div id="map">
<a href="https://www.maptiler.com"
style="position:absolute;left:10px;bottom:10px;z-index:999;"><img
src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
</div>
<p>© MapTiler <a
href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap
contributors</a></p>
<script>
var map = L.map('map').setView([8.94917, 125.54361], 12);
L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?
key=aLd1dKi19JrBFCzDze2p',{
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\"
target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca
href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy;
OpenStreetMap contributors\u003c/a\u003e",
crossOrigin: true
}).addTo(map);
var polygon = L.polygon([8.94917, 125.54361],[9.00333023, 125.48916626],
[8.85280991, 125.66551208]).addTo(map);
</script>
</body>
</html>

There are several issues that prevent the map from displaying, and the polygon shape for loading:
some small errors in source, caused by line returns: see browser console to check and correct these. (note these might not exist in your source, but may be caused by line wrapping when copy/pasting the source).
Main issue is that the polygon coordinates should be wrapped in an array, as shown in bold in this example :
var polygon = L.polygon( [ [8.94917, 125.54361],[9.00333023, 125.48916626], [8.85280991, 125.66551208] ] ).addTo(map);

Related

How to set origin and destination with mapbox-gl-directions?

I'm using Mapbox to integrate in a javascript/php project. So far so good. Works great. Looking around their api I was wondering whether it was possible to have a mix between mapbox-gl-directions and mapbox-directions api. They don't seem to be the same thing.I really like the example from mapbox-gl-directions which gives the user options to select between driving, cycling and walking. But I already have coordinates for the origin point and coordinates for the destination point. I don't necessarily need the user to input those coordinates but I would also like to leave the user the option to enter alternative coordinates if he wanted to. How can I add starting and destination points to the mapbox-gl-directions just like the mapbox-directions-api? I've looked everywhere in their docs.
mapbox-gl-directions :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display driving directions</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; };
</style>
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.js"></script>
<link
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.css"
type="text/css"
/>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoid2ViYjI0aCIsImEiOiJjazU3a2lkbW4wNGJrM2RvNnNrNnBzbGlxIn0.GGnF34IsMQyqKNoam241tA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-79.4512, 43.6568],
zoom: 13
});
map.addControl(
new MapboxDirections({
accessToken: mapboxgl.accessToken
}),
'top-left'
);
</script>
</body>
</html>
Turn
map.addControl(
new MapboxDirections({
accessToken: mapboxgl.accessToken
}),
'top-left'
);
into
var directions = new MapboxDirections({
accessToken: mapboxgl.accessToken
});
map.addControl(directions,'top-left');
map.on('load', function() {
directions.setOrigin([12, 23]); // can be address in form setOrigin("12, Elm Street, NY")
directions.setDestinaion([11, 22]); // can be address
})

Using Leaflet map in php page

I was searching for free maps as an alternative to google maps to use in my website. As I searched I found leaflet. Referring the tutorial I tried creating a simple map in my localhost. But its loading blank. I am using leaflet for the first time. Is there anything I am missing out in my code? Can anyone help me..? Thanks in advance.
Here is my code:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map',{
center: [43.64701, -79.39425],
zoom: 15
});
</script>
</body>
</html>
You need to add a tile layer to your map and try using one of the latest leaflet versions, such as 1.3.3. Moreover set a height like this:
#map{ height: 500px }
Try this
var map = L.map('map').setView([43.64701, -79.39425], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
#map {
height: 500px
}
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet#1.3.3/dist/leaflet.css">
<script src='https://unpkg.com/leaflet#1.3.3/dist/leaflet.js
'></script>
<div id="map"></div>

can't view a raster image (multiband satellite image) with image overlay plugin over leaflet

i'm trying to view a raster image (multiband satellite image) ,with 8 bands , in a web mapping site using image-overlay (leaflet plugin) . i get the image extent blank . this is the raster file that i used
<html>
<iframe src="https://onedrive.live.com/embed?cid=313D1A84155423E8&resid=313D1A84155423E8%21103&authkey=ADFZt66lh2yvK-g" width="98" height="120" frameborder="0" scrolling="no"></iframe>
</html>
raster_file
and the result viewed in the website raster viewed in website
this is the source code
<!DOCTYPE html>
<html>
<head>
<title>raster</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.3/leaflet.css"></script>
<style type="text/css">
html, body, #map {
margin: 0px;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
var map = L.map('map', {
center: [31,-8],
zoom: 8,
});
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.streets'
}).addTo(map);
var bounds = new L.LatLngBounds(
new L.LatLng(34.22,-8.68),
new L.LatLng(32.01,-6.27));
var overlay = new L.ImageOverlay("croplf3.tif", bounds
);
map.addLayer(overlay);
</script>
</body>
</html>
You should be able to use the built in ImageOverlay functionality.
var bounds = new L.LatLngBounds(
new L.LatLng(34.22, -8.68),
new L.LatLng(32.01, -6.27)
);
var overlay = new L.imageOverlay("croplf3.tif", bounds)
.addTo(map);

Mapbox JS Marker Creation On Click

I am currently using mapbox js in conjunction with a satellite imagery API and I am wondering how to display a very simple marker of the last click (from the user) on the map.
Ideally when the user clicks in the map it would be display a small semi-transparent square which would correspond to the zoomed in area being displayed by the satellite API.
There's a ton of information about interacting with current markers that were created beforehand, but I want to dynamically create a marker on click that only lives until the next click.
It would be something like below, only with a smaller radius.
If you are just looking to add the circle and remove it on the next mouseclick, something like this would work:
L.mapbox.accessToken = 'pk.eyJ1IjoiY2NhbnRleSIsImEiOiJjaWVsdDNubmEwMGU3czNtNDRyNjRpdTVqIn0.yFaW4Ty6VE3GHkrDvdbW6g';
var map = L.mapbox.map('map', 'mapbox.streets').setView([38.91338, -77.03236], 16);
streetsBasemap = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2NhbnRleSIsImEiOiJjaWVsdDNubmEwMGU3czNtNDRyNjRpdTVqIn0.yFaW4Ty6VE3GHkrDvdbW6g', {
maxZoom: 18,
minZoom: 6,
zIndex: 1,
id: 'mapbox.streets'
}).addTo(map);
map.on('click', addMarker);
function addMarker(e){
if (typeof circleMarker !== "undefined" ){
map.removeLayer(circleMarker);
}
//add marker
circleMarker = new L.circle(e.latlng, 200, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
}
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Single marker</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<style>
</style>
</head>
<body>
<div id='map'></div>
</body>
</html>

google maps not displayed correctly unless refreshing

I am using JQuery mobile with the Google Map API.
The map is not displayed properly unless I refresh the page and I don't understand why.
here is my map.html file:
<div data-role="page" id="map-page">
<div data-role="content" id="canvas-map" style="background-color:red"></div>
<script src="js/map.js"></script>
<script type="text/javascript">
var $canvasMap = $('#canvas-map');
$('#canvas-map').on('pagebeforeshow', initMap());
</script>
</div>
and my map.js file:
function initMap() {
"use strict";
google.maps.visualRefresh = true;
var marker, map,
myLocation = {lat:50, lon:-80},
mapOptions = {
zoom: 5,
center: new google.maps.LatLng(myLocation.lat, myLocation.lon),
mapTypeId: google.maps.MapTypeId.PLAN,
disableDefaultUI: true
};
$('#canvas-map').css("height", "200px").css("padding", "0px");
map = new google.maps.Map(document.getElementById('canvas-map'), mapOptions);
/** MyPosition **/
marker = new google.maps.Marker({
map: map,
draggable: false,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(myLocation.lat, myLocation.lon),
});
}
If I navigate from another page to the above page, I get the following result:
And then when I refresh, I get the expected result:
It is obviously not a problem with the canvas, since it is displayed (in red). Plus,if I navigate trhough the map, I can see the marker displayed at the right position.
These screenshots were made using Google Chrome, I tried with Firefox and the canvas is here completely red, no map at all.
PS: this is a simple version of my original code, but the behavior is the same.
EDIT:
See Gajotres' answer for details, but basically, within the link to access map.html page, adding target="_blank" solved the issue. Note that target="_self" seems to work as well, strange since it is supposed to be the default value. Details on target here.
There's a trick how google maps v3 framework can be easily implemented with jQuery Mobile.
Lets talk about the problems here. your content div has a height and width problem, mainly because only time page dimensions can be calculated correctly is during the pageshow event. But even then content div will not cover full page.
Your problem can be solved with a little bit of CSS :
#content {
padding: 0 !important;
position : absolute !important;
top : 40px !important;
right : 0 !important;
left : 0 !important;
height: 200px !important;
}
Basically you are forcing your content to cover available space.
Working example: http://jsfiddle.net/RFNPt/2/
Final solution :
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<title>MyTitle</title>
</head>
<body>
<div data-role="page" class="page">
<div data-role="content" id="index-content">
<div id="menu">
Map
</div>
</div>
</div>
</body>
</html>
map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<title>MyTitle</title>
</head>
<body>
<div data-role="page" id="map-page">
<div data-role="content" id="content">
<div id="canvas-map" style="height:100%"/>
</div>
<style>
#content {
padding: 0 !important;
position : absolute !important;
top : 0 !important;
right : 0 !important;
bottom : 40px !important;
left : 0 !important;
}
</style>
<script type="text/javascript">
$(document).on('pageshow', '#map-page', function(e, data) {
var marker, map,
myLocation = {
lat: 50,
lon: -80
},
mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.PLAN,
center: new google.maps.LatLng(myLocation.lat, myLocation.lon)
};
$('#canvas-map').css("height", "200px").css("padding", "0px");
map = new google.maps.Map(document.getElementById('canvas-map'), mapOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(myLocation.lat, myLocation.lon),
});
});
</script>
</div>
</body>
</html>
If you take a look at this ARTICLE you will find much more information regarding this topic plus examples.
Try to add following code...
$('#canvas-map').on('pageshow', function(){
google.maps.event.trigger(canvas-map, "resize");
});
this will fire resize event and reload the map on your page.
Just for completeness: The action of drawing the map should be performed after the page loads, that is when the page has actual values for width and height and you can initialize it as follows:
var map; //declared as global so you can access the map object and add markers dynamically
$("#canvas-map").on( "pageshow", function() {
var mapProp = {
center:new google.maps.LatLng(53.6721226, -10.547924),
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
});
No refresh needed

Categories