I'm having trouble creating an object using the addObject function in an HTML element in Bubble.io.
I think the problem is related to the passing of arguments between functions (specially the “map” one).
In this example, the whole “map.object” part creates a circle in my map (which is displayed in the HTML element that contains my script). My goal is to have that chunk of code inside the addCircleToMap function, so that whenever a click is registered, the code will run. My problem is that whenever I do that, the addObject function is not recognized (inside of the addCircleToMap). But when I run it as in the example above (outside of said function) it is recognized and creates the circle as needed, but only one time.
If I want it to run inside of the addCircleToMap function, do I need to change anything?
Thank you very much for your help!
<html>
<head>
<title> MY MAP</title>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
</head>
<style>
#map {width: 800px; height: 600px;}
</style>
<div id="map"></div>
<body>
<script>
function initializeHEREmap(){
var mapContainer = document.getElementById('map'), routeInstructionsContainer = document.getElementById('panel');
let newLat = 19.46291370462809;
let newLng = -99.13708437766161;
const imlService = platform.getIMLService();
const platform = new H.service.Platform({
apikey: '*******************'
});
const defaultLayers = platform.createDefaultLayers();
const map = new H.Map(
document.getElementById('map'),
defaultLayers.vector.normal.map,
{
center: new H.geo.Point(newLat, newLng),
zoom: 12
}
);
window.addEventListener('resize', () => map.getViewPort().resize());
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
const ui = H.ui.UI.createDefault(map, defaultLayers);
setUpClickListener(map, newLat, newLng);
function setUpClickListener(map, newLat, newLng) {
map.addEventListener('tap', function (evt) {
var coord = map.screenToGeo(evt.currentPointer.viewportX, evt.currentPointer.viewportY);
newLat = coord.lat;
newLng = coord.lng;
addCircleToMap(map, newLat, newLng );
});
map.addObject(new H.map.Circle(
{lat:newLat, lng:newLng},
500,
{
style: {
strokeColor: 'rgba(55, 85, 170, 0.6)',
lineWidth: 2,
fillColor: 'rgba(89, 80, 218, 0.7)'
}
}
));
}
function addCircleToMap(map, newLat, newLng ){
//I WANT MY CODE HERE
}
}
</script>
</body>
</html>
Related
I'm trying to build my personal gis library using OpenLayers; it is the first time that I do this.
Usually I build a simple map using this code:
var map = new ol.Map({
target: 'map'
});
var view = new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
});
map.setView(view);
var osm = new ol.layer.Tile({
source: new ol.source.OSM()
});
map.addLayer(osm);
Now I've created a static file called gislibraries.js and here I initialize my map:
function MapInizialized(mapTarget) {
const map = new ol.Map({
target: mapTarget
});
return map;
};
function MapSetView(longitude, latitude, zoomLevel) {
const view = new ol.View({
center: ol.proj.fromLonLat([longitude, latitude]),
zoom: zoomLevel
});
map.setView(view);
return view;
};
function MapTile() {
const osm = new ol.layer.Tile({
source: new ol.source.OSM()
});
map.addLayer(osm);
return osm;
};
Using the code below inside index.html I can see my map.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Base Map | GeoDjango</title>
<link rel="stylesheet" href="/static/css/map.css">
<script src="/static/js/mapscripts.js" type="text/javascript"></script>
<!-- OpenLayers 6 -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.3.1/css/ol.css"
type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.3.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new MapInizialized('map');
MapSetView(0.0, 0.0, 2);
MapTile();
</script>
</body>
</html>
When I use:
MapInizialized('map');
MapSetView(0.0, 0.0, 2);
MapTile();
My map doesn't work and I can see this error:
Uncaught TypeError: map.setView is not a function
MapSetView http://127.0.0.1:8000/static/js/mapscripts.js:17
http://127.0.0.1:8000/:51
Why I can't invoke MapInizialized('map');?
For map to be available to all the function it must be declared outside the functions
let map;
function MapInizialized(mapTarget) {
map = new ol.Map({
target: mapTarget
});
return map;
};
I just want to create a default website, showing a map like this demo from HEREMaps. The HTML and JavaScript code is already provided, so I just had to put both together and should work, but it seems like there is a mistake.
Unfortunately, my code fails in every browser, because there is no content behind some links to script resources in the HTML head:
../template.css
../test-credentials.js
../js-examples-rendering-helpers/iframe-height.js
This seems obvious to me, but somehow jsFiddle can read this file without any problem and I am quite sure that HEREMaps doesn't provide wrong code, so I would like to know what is wrong with my code.
For safety reasons, I am not going to write my credentials, so window.apikey has to be replaced, if you try it out.
Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Map at a specified location</title>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="../template.css" />
<script type="text/javascript" src='../test-credentials.js'></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script type="text/javascript" src='../js-examples-rendering-helpers/iframe-height.js'></script>
</head>
<body id="markers-on-the-map">
<script type="text/javascript" src='demo.js'>
/**
* Moves the map to display over Berlin
*
* #param {H.Map} map A HERE Map instance within the application
*/
function moveMapToBerlin(map){
map.setCenter({lat:52.5159, lng:13.3777});
map.setZoom(14);
}
/**
* Boilerplate map initialization code starts below:
*/
//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
apikey: window.apikey
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
defaultLayers.vector.normal.map,{
center: {lat:50, lng:5},
zoom: 4,
pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());
//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));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Now use the map as required...
window.onload = function () {
moveMapToBerlin(map);
}
</script>
</body>
</html>
Following the link you provided. I've set up a working example:
// HEREMaps - Demo API Key. You should change this.
var apikey = 'H6XyiCT0w1t9GgTjqhRXxDMrVj9h78ya3NuxlwM7XUs';
/**
* Moves the map to display over Berlin
*
* #param {H.Map} map A HERE Map instance within the application
*/
function moveMapToBerlin(map) {
map.setCenter({
lat: 52.5159,
lng: 13.3777
});
map.setZoom(14);
}
/**
* Boilerplate map initialization code starts below:
*/
//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
apikey: apikey
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
defaultLayers.vector.normal.map, {
center: {
lat: 50,
lng: 5
},
zoom: 4,
pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());
//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));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Now use the map as required...
window.onload = function() {
moveMapToBerlin(map);
}
#map {
width: 95%;
height: 450px;
background: grey;
}
#panel {
width: 100%;
height: 400px;
}
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js" charset="utf-8"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js" charset="utf-8"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" charset="utf-8"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" charset="utf-8"></script>
<!-- Map Container -->
<div id="map"></div>
I have js script file. Where I use google heatmap
Here is code of js file
$(document).ready(function () {
//map initialization
function initMap() {
map = new google.maps.Map(document.getElementById('map'),
{
zoom: 5,
center: { lat: 51.0742853, lng: 11.0294547 },
mapTypeId: 'roadmap'
});
var centerControlDiv = document.createElement('div');
var centerControlDiv2 = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, map);
var centerControl2 = new CenterControl1(centerControlDiv, map);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
getDriving();
}
});
In View I have script
script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCea6mL2cqwVid2ESIjuJ0C31RbNVQNPY0&libraries=visualization&callback=initMap">
When I run project I have initMap is not a function error. How I can fix it.
Delete callback=initMap not solve problem
Here is how scripts defined
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCea6mL2cqwVid2ESIjuJ0C31RbNVQNPY0&libraries=visualization&callback=initMap">
</script>
<script src="~/Scripts/DataTables-1.10.2/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css" />
<script src="~/Scripts/jquery-ui.min.js"></script>
<script src="~/Scripts/Datepicker-Languages/datepicker-languages.js"></script>
<link href="~/Content/Styles/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script src="~/Scripts/jQuery-ui-extensions/weekMonthDatepicker.js?v=1.0.0.0"></script>
<script src="~/Scripts/Reports/Heatmap.js"></script>
InitMap in this row <script src="~/Scripts/Reports/Heatmap.js"></script>
Remove the async, which tells the Browser to parse the code independently of the rest of the code being loaded and just rely on the defer, which tells the browser to wait until the document is loaded until executing it.
<script defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCea6mL2cqwVid2ESIjuJ0C31RbNVQNPY0&libraries=visualization&callback=initMap">
OR change the order of the scripts in the file to:
<script src="~/Scripts/Reports/Heatmap.js"></script>
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCea6mL2cqwVid2ESIjuJ0C31RbNVQNPY0&libraries=visualization&callback=initMap">
</script>
You also don't need to wait for the document to load (and don't want to) to define your function so remove the first and last lines.
//map initialization
function initMap() {
map = new google.maps.Map(document.getElementById('map'),
{
zoom: 5,
center: { lat: 51.0742853, lng: 11.0294547 },
mapTypeId: 'roadmap'
});
var centerControlDiv = document.createElement('div');
var centerControlDiv2 = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, map);
var centerControl2 = new CenterControl1(centerControlDiv, map);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
getDriving();
}
This is my first attempt working with javascript and GeoJSON by using leaflet.
So far, I got the desired map and the leaflet.draw plugin working in the way that I can draw a shape and it appears on my screen.
I tried to write this shape to a GeoJSON that I want to use in R.
Therfore I used the ideas presented here to create the GeoJSON string. I think the desired information for me is stored in the variable shape_for_db.
However, using Firebug in Firefox I am not able to find this variable.
Do I get something wrong here?
This is the script I am using:
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css" />
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<script src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>
<style>
#map{ width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// base map
var map = L.map('map').setView([51.25,10.57], 8);
// load a tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{
attribution: 'Tiles by: OpenStreetMaps',
maxZoom: 17,
minZoom: 5
}).addTo(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 drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
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;
drawnItems.addLayer(layer);
});
// Shape to GeoJSON
map.on('draw:created', function (e) {
var type = e.layerType;
var layer = e.layer;
var shape = layer.toGeoJSON()
var shape_for_db = JSON.stringify(shape);
});
</script>
</body>
</html>
The scope for your shape_for_db is inside your second listener for draw-created. You can place on window.shape_for_db if you are doing this for a one-off experimental/playing around approach and want to use your dev console/Firebug. Or set up var shape_for_db outside the listener.
In my app I want to store application-defined data on each latLng in a path.
I have got this to work using the code example below, but I would like to know whether this is an undocumented fluke that just 'happens' to work and could get broken in the future, or is it perfectly valid code that should always work?
In short, is 'getPath' guaranteed to return the same latLng objects that were passed in, or can it pass back new ones with the same lat and the same lng but anything else that google doesn't care about might not still be there?
Thanks for any assistance
Click on the line, and it should alert "one two three".
<!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=MY_KEY&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.0, -1.5),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var polyline = new google.maps.Polyline({
map: map,
strokeColor: "blue",
strokeThicknedss: 2
});
polyline.setPath([
getLatLng(51.9, -1.4, "one"),
getLatLng(52.0, -1.5, "two"),
getLatLng(52.0, -1.6, "three")
]);
google.maps.event.addListener(polyline, "click", function() {
var path = this.getPath().getArray();
var datas = [];
for(var i = 0; i < path.length; i++) {
var ll = path[i];
datas.push(ll.data);
}
alert(datas.join("\n"));
});
}
function getLatLng(lat, lng, data) {
var ll = new google.maps.LatLng(lat, lng);
ll.data = data;
return ll;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
Well according to the docs getPath() 'retrieves the first path'. And you've just set the path using setPath()... I'm not sure Google are going to mess with that data; your approach seems sound to me.
I found that the best way for storing polylines is to use Google's encoding function in the geometry library.
var polylineToStore = google.maps.geometry.encoding.encodePath(polyline.getPath());
This sets the polylineToStore variable to a string. When you want to reuse that encoded polyline you only need to decode it:
polyline.setPath(google.maps.geometry.encoding.decodePath(polylineToStore))
https://developers.google.com/maps/documentation/javascript/geometry#Encoding