Setting the proper size of a map with setView - javascript

I'm trying to make a static map with Leaflet plugin. I've already prepared a 1024x768 map and made some settings for a static map. I have a problem with setView - I can't make it display my map properly. Here's my code:
#mapid
{
height: 768px;
width: 1024px;
}
<!doctype html>
<html>
<head>
<title>Gothic 3 Map</title>
<meta charset="utf-8">
<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>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mapid" ></div>
<script>
var mymap = L.map('mapid', {
dragging: false,
zoomControl: false,
touchZoom: false,
doubleClickZoom: false,
scrollWheelZoom: false
}).setView([0,0], 0);
L.tileLayer('https://vignette.wikia.nocookie.net/gothic/images/a/a6/Mapa_Myrtany_%28Gothic_3%29.jpg/revision/latest?cb=20080816123521&path-prefix=pl', {
minZoom: 0,
id: 'myrtana'
}).addTo(mymap);
document.getElementsByClassName( 'leaflet-control-attribution' )[0].style.display = 'none';
document.getElementsByClassName( 'leaflet-top' )[0].style.display = 'none';
var marker = L.marker([0, 0]).addTo(mymap);
</script>
</body>
</html>
I just want to make this map fitting into this grey rectangle.

Related

How to hover a map nicely?

I've just started using HERE API and there's a little issue.
The map I add to my HTML document works fine. The problems appears when I try to use hover in CSS. Instead of the map expending smoothly there's a big empty area in the right corner.
Here's my CSS:
#mapContainer {
position: absolute;
right: 0px;
bottom: 0px;
width: 300px;
height: 300px;
}
#mapContainer {
transition: all .2s ease-in-out;
}
#mapContainer:hover {
width: 80%;
height: 300px;
}
Below you can see my JS code:
var platform = new H.service.Platform({
'apikey': {myApiKey}
});
var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(
document.getElementById('mapContainer'),
defaultLayers.vector.normal.map,
{
zoom: 10,
center: { lng: 17.0, lat: 51.0 }
});
window.addEventListener('resize', () => map.getViewPort().resize());
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
ui.getControl('zoom').setDisabled(false)
var icon = new H.map.Icon('img/marker.png', {size:{h:50,w:50}});
var markerWroclaw = new H.map.Marker({ lat: 51.0, lng: 17.0 }, { icon: icon });
map.addObject(markerWroclaw);
HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script type="text/javascript" >window.ENV_VARIABLE = 'https://developer.here.com'</script>
<script src='https://developer.here.com/javascript/src/iframeheight.js'></script>
<script type="text/javascript" src="back_end/js/main.js"></script>
<link rel="stylesheet" href="css/indexstyle.css"/>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css"/>
</head>
<body>
<div id="mapContainer"></div>
</body>
</html>
Any ideas? Thank you in advance.

Javascript use onclick and geolocation to retrieve current location

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);

How do I prefill the origin and destination of a mapbox directions api?

I have:
<!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.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/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/v3.1.3/mapbox-gl-directions.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.3/mapbox-gl-directions.css' type='text/css' />
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYndhZGFtc29uIiwiYSI6ImNqajZhNm1idDFzMjIza3A2Y3ZmdDV6YWYifQ.9NhptR7a9D0hzWXR51y_9w';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-79.4512, 43.6568],
zoom: 13
});
map.addControl(new MapboxDirections({
accessToken: mapboxgl.accessToken
}), 'top-left');
</script>
</body>
</html>
This gives me a nice map with driving directions but I want to prefill the "starting place" and "destination" in the rendered map. How do I do that via javascript so the user doesn't have to enter their information twice?
You need the setOrigin and setDestination methods from the MapboxDirections API:
map.on('load', function() {
var directions = new MapboxDirections({
accessToken: mapboxgl.accessToken
});
map.addControl(directions, 'top-left');
directions.setOrigin('Brockton Avenue, Toronto');
directions.setDestination('East York Avenue, Toronto');
});
[ https://jsfiddle.net/me3kj9td/ ]

How to use polylinedecorator plugins in leaflet?

i'm new in html and leaflet, i don't know how to use plugins in leaflet
right now i'm working with polyline decorator plugins but i don't know how to use it right
i'm trying following tutorial on internet, here my code
var arrow = L.polyline([[107.63576,-2.72322], [107.65699,-2.7366]], {}).addTo(map);
var arrowHead = L.polylineDecorator(arrow, {
patterns: [
{offset: '100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 15, polygon: false, pathOptions: {stroke: true}})}
]
}).addTo(map);
and here my head section
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<script src="polyline/dist/leaflet.polylineDecorator.js"></script>
<script src="polyline/src/L.polylineDecorator.js"></script>
</head>
You have the latitudes and longitudes swapped in the call to L.polyline. Try this line instead:
var arrow = L.polyline([[-2.72322, 107.63576], [-2.7366, 107.65699]], {}).addTo(mymap);

Map is blury when rendered using 100% height in css in Leaflet JS library

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:

Categories