how to add Info Bubbles to HERE maps. I follow the steps on the HERE api page, but the info bubble doesn't popup.
According to the Here api, here is the way to add popup.
https://developer.here.com/documentation/maps/topics/map-controls.html
var bubble = new H.ui.InfoBubble({ lng: 13.4, lat: 52.51 }, {
content: '<b>Hello World!</b>'
});
// Add info bubble to the UI:
ui.addBubble(bubble);
I follow the code and the map loads correctly with the right coordinates, but I don't see any info bubble on the map.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,
width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://js.api.here.com/v3/3.0/mapsjs-ui.css" />
</head>
<body>
<div id="map" style="width: 100%; height: 400px; background: grey" />
<script type="text/javascript" charset="utf-8">
//Initialize the Platform object:
var platform = new H.service.Platform({
'app_id': '{YOUR_APP_ID} ',
'app_code': '{YOUR_APP_CODE} '
useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
//Step 2: initialize a map - not specificing a location will give a whole world view.
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map, {pixelRatio: pixelRatio});
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Get the default map types from the Platform object:
map.setCenter({lng: 13.4, lat: 52.51});
map.setZoom(10);
// Instantiate the map:
// Create the default UI:
var ui = H.ui.UI.createDefault(map, defaultLayers, 'de-DE');
var mapSettings = ui.getControl('mapsettings');
var zoom = ui.getControl('zoom');
var scalebar = ui.getControl('scalebar');
var panorama = ui.getControl('panorama');
panorama.setAlignment('top-left');
mapSettings.setAlignment('top-left');
zoom.setAlignment('top-left');
scalebar.setAlignment('top-left');
var bubble = new H.ui.InfoBubble({ lng: 13.4, lat: 52.51 }, {
content: '<b>Hello World!</b>'
});
// Add info bubble to the UI:
ui.addBubble(bubble);
</script>
</body>
</html>
I'm Richard and I'm a developer evangelist for HERE.
Your code breaks in this line:
panorama.setAlignment('top-left');
This line indicates that you want to move the StreetLevel UI element to the top-left of the map. However this element does not exist, as you've forgotten to import the mapsjs-pano.js library. This library is required for StreetLevel functionality. Add the following line to your and your code should work.
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-pano.js"></script>
Also note that you are missing a comma after setting your app_code and that your importing some libraries twice. You may have to fix these issues as well for your code to work. Here is a cleaned up version of your code that does what you want to do.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-pano.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 400px; background: grey" />
<script type="text/javascript" charset="UTF-8" >
function createInfoBubble(map) {
// Create info bubble
var bubble = new H.ui.InfoBubble({ lng: 13.4, lat: 52.51 }, {
content: '<b>Hello World!</b>'
});
// Add info bubble to the UI:
ui.addBubble(bubble);
}
// Step 1: initialize the platform
var platform = new H.service.Platform({
app_id: '{YOUR_APP_ID}',
app_code: '{YOUR_APP_CODE}',
useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
// Step 2: initialize a map
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map, {pixelRatio: pixelRatio});
// Step 3: make the map interactive
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Step 4: create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Move UI elements to the top left of the map
var mapSettings = ui.getControl('mapsettings');
var zoom = ui.getControl('zoom');
var scalebar = ui.getControl('scalebar');
var panorama = ui.getControl('panorama');
panorama.setAlignment('top-right');
mapSettings.setAlignment('top-left');
zoom.setAlignment('top-left');
scalebar.setAlignment('top-left');
// Move map to Berlin
map.setCenter({lat:52.5159, lng:13.3777});
map.setZoom(14);
createInfoBubble(map);
</script>
</body>
</html>
Related
I am succesfully implementing the HERE Javascript API for my web app. I wanted to lighten the map presentation, so I first tried to create my own map style as presented on this guide.
The examples given work fine but I could not tune it as I wish without malfunctioning (I guess indentation is the problem but I could not verify it despite hours of trying). I could not find any "Map styling file generator" so I almost gave up until I found these:
How to remove all colors from Here Maps base layer?; and
Here JavaScript 3.0 API - decent color scheme
Unfortunately, the given code in these answers does not work:
//Instead of using the default layers...
//var defaultLayers = platform.createDefaultLayers();
//...create your own layer (with e.g. the "reduced" scheme
var reduced = platform.getMapTileService({
type: 'base'
}).createTileLayer("maptile", "reduced.day", 256, "png8");
//Initialize a map using your custom map tile layer
var map = new H.Map(document.getElementById('mapp'), reduced, {
center: {
lat: 52.3,
lng: 13.8
},
zoom: 10
});
whereas the defaultLayers.vector.normal.map and the reduced objects seems to be the same kind of objects, using the defaultLayers get me the default map and using the reduced Layout just get me a blank map without errors on console but those GET type Errors:
mapsjs-core.js:33 GET https://1.base.hereapi.com/maptile/2.1/info?xnlp=CL_JSMv3.1.0.3&apikey=[My credentials]&output=json net::ERR_NAME_NOT_RESOLVED
d # mapsjs-core.js:33
ic # mapsjs-core.js:34
application/json # mapsjs-core.js:70
af.yj # mapsjs-core.js:69
(anonymous) # mapsjs-core.js:44
(anonymous) # mapsjs-core.js:44
zj # mapsjs-core.js:44
add # mapsjs-core.js:44
rd # mapsjs-core.js:43
af # mapsjs-core.js:69
n.ga # VM2398:15
n.hh # VM2398:18
tn # VM2398:14
T.vb # VM2398:14
T.th # VM2398:20
(anonymous) # script.js:60
Below is my complete code :
///### Credentials
// Identification service, this key only work on present domain.
var platform = new H.service.Platform({
'apikey': '[Well .. my credentials]'
});
///### Map setup
//...create your own layer (with e.g. the "reduced" scheme
var reduced = platform.getMapTileService({
type: 'base'
}).createTileLayer("maptile", "reduced.day", 256, "png8");
//Step 2: initialize a map using your custom map tile layer
var map = new H.Map(document.getElementById('map'), reduced, {
center: {
lat: 52.3,
lng: 13.8
},
zoom: 10
});
///### Map Interaction
// Add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());
// Set the map interactive
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI:
var ui = H.ui.UI.createDefault(map, defaultLayers ,'es-ES');
Maybe the statement for getting Map Tiles has changed?
You should use js version 3.0 to make your code worked instead of 3.1
Does this work for you?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
</head>
<body>
<div id="map" style="position:absolute; width:100%; height:100%; background:grey" ></div>
<!--<div id="panel" style="position:absolute; width:49%; left:51%; height:100%; background:inherit" ></div>-->
<script type="text/javascript" charset="UTF-8" >
//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: 'DemoAppId01082013GAL',
app_code: 'AJKnXv84fjrb0KIHawS0Tg',
useCIT: true
});
//Instead of using the default layers...
//var defaultLayers = platform.createDefaultLayers();
//...create your own layer (with e.g. the "reduced" scheme
var reduced = platform.getMapTileService({
type: 'base'
}).createTileLayer("maptile", "reduced.day", 256, "png8");
//Step 2: initialize a map using your custom map tile layer
var map = new H.Map(document.getElementById('map'), reduced, {
center: {
lat: 52.3,
lng: 13.8
},
zoom: 10
});
//Step 3: make the map interactive
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
</script>
</body>
</html>
I just made your source code worked.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,
width=device-width" />
<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>
<link rel="stylesheet" type="text/css"
href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body>
<div style="width: 640px; height: 480px" id="mapContainer"></div>
<script type="text/javascript" charset="utf-8">
var style = `
sources:
omv:
type: OMV
max_zoom: 17
min_display_zoom: 1
scene:
background:
color: [1.000, 1.000, 1.000, 1.00]
layers:
water_areas:
data: {source: omv, layer: water}
draw:
polygons:
order: 1 # z-order of the layer
color: [0.055, 0.604, 0.914, 1.00]
road:
data: {source: omv, layer: roads}
draw:
lines:
order: 2
color: [0.561, 0.561, 0.561, 1.00]
width: 15
major_road:
filter:
kind: 'major_road'
draw:
lines:
color: [0.882, 0.553, 0.086, 1.00]
width: 5px
`;
//Initialize the Platform object:
var platform = new H.service.Platform({
'apikey': 'APIKEY'
});
// Get the default map types from the Platform object:
var defaultLayers = platform.createDefaultLayers();
// Instantiate the map:
var map = new H.Map(
document.getElementById('mapContainer'),
defaultLayers.vector.normal.map,
{
zoom: 10,
center: { lng: 13.8, lat: 52.3 }
});
var baseLayer = map.getBaseLayer();
baseLayer.getProvider().setStyle(new H.map.Style(style));
</script>
</body>
</html>
I have a problem with implementing the newest version of leaflet draw to my project.
The only requirement is to only use a CSS & Script links to get the plugin to work...(If it's not possible just ignore and try another way)
Basically, it should work just as on their website - https://freedraw.herokuapp.com/
What should I do to load the newest version of the plugin? What am I doing wrong?
I'm a beginner in this so thanks for any help.
<html>
<head>
<title>Free Draw</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css"/>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;">
</div >
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js" >
</script >
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"> </script >
<script>
//Creating map and setting zoom
var map = L.map('map').setView([45.8650, -75.2094], 3);
// Set up the OSM layer
L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.{ext}', {
ext: 'png',
maxZoom: 18,
attribution: 'Wikimedia maps | Map data © <a target="_blank" href="https://openstreetmap.org/copyright">OSM contributors</a>'
}).addTo(this.map);
// Initialise the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
drawnItems.addLayer(layer);
});
</script >
</body>
</html>
The latest version is 1.0.4 - so
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
and
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"> </script >
should fetch it in for you.
I am having an issue disabling scrollwheel zoom in Leaflet Minimap.
I am instantiating the minimap with a centerFixed and a zoomLevelFixed option as per https://github.com/Norkart/Leaflet-MiniMap/pull/95 but I can still zoom with the scroll wheel; Panning is disable though.
The following is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="fullscreen.css" />
<!-- Leaflet -->
<link rel="stylesheet"
href="https://unpkg.com/leaflet#1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.1/dist/leaflet.js"
type="text/javascript"></script>
<!-- Leaflet Plugins -->
<link rel="stylesheet" href="Control.MiniMap.css" />
<script src="Control.MiniMap.js" type="text/javascript"></script>
</head>
<body>
<div id="map" ></div>
<script type="text/javascript">
var map = new L.Map('map', { scrollWheelZoom: false});
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {/*minZoom: 5, maxZoom: 18,*/ attribution: osmAttrib});
map.addLayer(osm);
map.setView(new L.LatLng(59.92448055859924, 10.758276373601069),10);
//Plugin magic goes here! Note that you cannot use the same layer object again, as that will confuse the two map controls
var osm2 = new L.TileLayer(osmUrl, {/*minZoom: 0, maxZoom: 13,*/ attribution: osmAttrib });
var miniMap = new L.Control.MiniMap(osm2,
{ position: "topright",
centerFixed: [40.7842, -73.9919],
toggleDisplay: true,
zoomLevelFixed: true
}).addTo(map);
</script>
</body>
</html>
I appreciate any guidance in solving this issue. Thank you!
I suppose you should use disable instead of false.
map.scrollWheelZoom.disable();
It will also work when you pass as arguments:
var map = L.map('map', {
center: [51.505, -0.09],
zoom: 13,
scrollWheelZoom: false
});
I have embedded a Google Map in my website. I want to change its location according to user input. How can I do this?
I tried to copy the link of the location and assign it to the iframe src:
$("iframe").attr("src", "https://maps.google.co.in/maps?q=USA&hl=en&ll=37.09024,-95.712891&spn=131.016476,346.289063&sll=23.259933,77.412615&sspn=0.178842,0.338173&oq=usa&doflg=ptm&hnear=United+States&t=m&z=2");
but the iframe is not loading the map.
Try to use the GoogleMaps JavaScript API. The offer way more control (geocode, searching, custom marker, etc...) over the map then just embedding a iframe.
Take a look at this :)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// Initiate map
function initialize(data) {
// Make position for center map
var myLatLng = new google.maps.LatLng(data.lng, data.lat);
// Map options
var myOptions = {
zoom: 10,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
// Initiate map
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Info window element
infowindow = new google.maps.InfoWindow();
// Set pin
setPin(data);
}
// Show position
function setPin(data) {
var pinLatLng = new google.maps.LatLng(data.lng, data.lat);
var pinMarker = new google.maps.Marker({
position: pinLatLng,
map: map,
data: data
});
// Listen for click event
google.maps.event.addListener(pinMarker, 'click', function() {
map.setCenter(new google.maps.LatLng(pinMarker.position.lat(), pinMarker.position.lng()));
map.setZoom(18);
onItemClick(event, pinMarker);
});
}
// Info window trigger function
function onItemClick(event, pin) {
// Create content
var contentString = pin.data.text + "<br /><br /><hr />Coordinate: " + pin.data.lng +"," + pin.data.lat;
// Replace our Info Window's content and position
infowindow.setContent(contentString);
infowindow.setPosition(pin.position);
infowindow.open(map)
}
</script>
</head>
<body onload="initialize({lat:-3.19332,lng:55.952366,text:'<h2>Edinburgh</h2><i>Nice city!</i>'})">
<div id="map_canvas">
</div>
</body>
</html>
I get this error when I call map.AddPopup() in OpenLayers:
Unable to get value of the property 'Left'; object is null or undefined
http://www.openlayers.org/api/OpenLayers.js
The same error occurs in both Chrome and IE. The map works fine when I comment out that line, and the markers work fine as well. Later, icon0 and lonLat0 will be several items in a loop, but I'll handle that. The end result should be a text box of some kind that would display on the marker.
The marker at lonLat0 displays, so it doesn't seem like a problem with the lonLat object.
Yes, I will end up displaying many markers with text on them all at once. I know, it seems silly, but that's the requirement.
Why does addPopup give me this error?
<html><body>
<div id='mapdiv'></div> <script src='http://www.openlayers.org/api/OpenLayers.js'></script>
<script>
map = new OpenLayers.Map('mapdiv');
map.addLayer(new OpenLayers.Layer.OSM());
var lonLat = new OpenLayers.LonLat(-104.73,38.92).transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject() );
var markers = new OpenLayers.Layer.Markers( 'Markers' );
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(lonLat));
function onPopupClose(evt) {selectControl.unselect(this.feature); }
var icon0 = new OpenLayers.Icon("pinMS.png", new OpenLayers.Size(32,32), new OpenLayers.Pixel(-16,-32));
var lonLat0 = new OpenLayers.LonLat(-104.73,38.92).transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject());
markers.addMarker(new OpenLayers.Marker(lonLat0, icon0.clone()));
// Error throws here
map.addPopup(new OpenLayers.Popup.FramedCloud("featurePopup", lonLat0, new OpenLayers.Size(10, 10), "<h2>Title</h2>description", null, true, onPopupClose));
map.setCenter (lonLat, 1);
</script></body></html>
I was able to reproduce your error and fix it. That demo code is really bad. I would start with a working example and modify it to fit your needs.
For example you need to call your javascript on <body onload="init()"> or else i'm surprised it even renders for you.
Anyway, All i did was replaced the map = new OpenLayers.Map('mapdiv'); for this:
map = new OpenLayers.Map({
div: "mapdiv",
center: new OpenLayers.LonLat(0, 0)
});
But here's the complete code incase you want to improve the structure of your file.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Open Popup on Layer.Vector</title>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
function init() {
map = new OpenLayers.Map({
div: "mapdiv",
center: new OpenLayers.LonLat(0, 0)
});
map.addLayer(new OpenLayers.Layer.OSM());
var lonLat = new OpenLayers.LonLat(-104.73, 38.92).transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject());
var markers = new OpenLayers.Layer.Markers('Markers');
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(lonLat));
function onPopupClose(evt) { selectControl.unselect(this.feature); }
var icon0 = new OpenLayers.Icon("pinMS.png", new OpenLayers.Size(32, 32), new OpenLayers.Pixel(-16, -32));
var lonLat0 = new OpenLayers.LonLat(-104.73, 38.92).transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject());
markers.addMarker(new OpenLayers.Marker(lonLat0, icon0.clone()));
// Error throws here
map.addPopup(new OpenLayers.Popup.FramedCloud("featurePopup", lonLat0, new OpenLayers.Size(10, 10), "<h2>Title</h2>description", null, true, onPopupClose));
map.setCenter(lonLat, 1);
}
</script>
</head>
<body onload="init()">
<div id="mapdiv" class="smallmap"></div>
</body>
</html>