Since moving from google.maps.KmlLayer to geoxml3 I now have "To Here" and "From Here" links on a new line at the bottom of each infowindow. How do I get rid of those?
After I posted the original question above, I figured out that this happens with the kmz branch but not the polys branch. I need the kmz branch, to deal with markers with shadows, which are either wider than 32 pixels or off-center.
I could be out of my depth, but looking at the KMZ source it seems that kmz/geoxml3 will always add the Directions line if there's a latlng for that placemark, which is to say for every placemark.
So, unless there's an infoWindowOption or something I'm not seeing, I guess all I can do is hack out the code that loads geDirections, around lines 1206-1215. But is there some way to suppress that line without hacking kmz/geoxml3?
The current map is at http://allbluesdance.com/bluesmapgeoxml3_005.php, and the code (with text styling removed) is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
#page-body { height: 100%; margin: 0; padding: 0; }
#map-canvas {
height: 100%;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDDFrP7MSD1ieFEvaF95BRlwHa0S72Fy1s&sensor=FALSE">
</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://geoxml3.googlecode.com/svn/branches/kmz/geoxml3.js"></script>
<script src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(20,-100),
zoom: 2,
preserveViewport: true
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var blues = new geoXML3.parser({map: map, singleInfoWindow: true, zoom: false});
blues.parse('http://allbluesdance.com/allbluesdance_003.kml');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body id="page-body">
<div id="map-canvas"/>
</body>
</html>
The KML file is:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<name>Blues Dance Cities</name>
<description><![CDATA[]]></description>
<Style id="style1">
<IconStyle>
<Icon>
<href>http://allbluesdance.com/bluemarkershadow_49x32.png</href>
<scale>1.0</scale>
</Icon>
<hotSpot x="24" y="0" xunits="pixels" yunits="pixels" />
</IconStyle>
</Style>
<Placemark>
<name>Argentina</name>
<description>
<![CDATA[<h6>Blues Playground Site,
Group</h6>
]]>
</description>
<styleUrl>#style1</styleUrl>
<Point>
<coordinates>-58.38159310000003,-34.6037232,0.0</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Australia & New Zealand</name>
<description>
<![CDATA[<h6><a href="https://www.facebook.com/groups/369022273182480/" target="_blank">Blues Dancers ANZ</h6>
<h6><a href="https://www.facebook.com/groups/1437271016490252/" target="_blank">Blues, Fusion & Alt-Blues Dancing<br>
(Australia & NZ)</h6>
]]>
</description>
<styleUrl>#style1</styleUrl>
<Point>
<coordinates>162.5,-37,0.0</coordinates>
</Point>
</Placemark>
.
.
.
Thanks,
Drew
Added an option to suppress the directions links in the infowindow in the KMZ branch of geoxml3 (revision 113 of the KMZ branch)
use it like this:
var blues = new geoXML3.parser({
map: map,
singleInfoWindow: true,
suppressDirections: true,
zoom: false
});
working example
Related
I'm just trying to do a simple map using the Leaflet.js libraries directly instead of the python wrappers(ipyleaflet, folium) but I can't any map to display regardless of what I do. the map area is drawn the correct size with the zoom controls, as are the tile attributions, and a marker in the right location. I have tried multiple browsers and also in QWebEngineView as well as different tile sets. I've also tried both the hosted js and css scripts as well as local copies The results are the same. Everything with the same v1.7.1 release though.
Here is the html code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<!-- <link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
-->
<style>
#map {
width: 900px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var layer = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox/satellite-v9',
tileSize: 512,
zoomOffset: -1,
accessToken: 'your.mapbox.access.token'
});
var mymap = L.map('map', { preferCanvas: true, center: [43.08695, -73.75792], layers: [layer], zoom: 10 });
var mymarker = L.marker([43.08695, -73.75792], { draggable: true }).addTo(mymap)
</script>
</body>
</html
Here's a screenshot
Anybody got any ideas? This ought to be something really simple...
I'm trying to follow the instructions here: https://docs.mapbox.com/mapbox-gl-js/example/simple-map/
My code is as follows, just as in the example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/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 = 'MY_TOKEN';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/ericgithinji/ckfchv1sr0u581amw703zg3jh',//it also fails when I use one of the public styles
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>
</body>
</html>
The div for the map doesn't display anyting, i.e. I get a blank web page. I've followed the tests here for style_id, tileset id, and access token and they all work: https://docs.mapbox.com/help/troubleshooting/blank-tiles/
I have no idea what could be the problem. If it helps,my Index.html is hosted locally on Ubuntu Apache2 server.
I was making two mistakes: 1 - using my secret token instead of my public token and 2 - not generating a style for myself first (it didn't work with the default style from the example).
I try to run MapBox under Blazor , using the next library
https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js
When I delete the line (from default app)
<script src="_framework/blazor.server.js"></script>
MapBox library works , except events. When i restore that line then events works, but the map disappear
How to fix the problem?
_host.cshtml:
#page "/"
#namespace BlazorApp3.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorApp3</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
<style>
#map {
position: absolute;
top: 0;
bottom: 0;
width: 85%;
height: 100%;
}
</style>
</head>
<body>
<app>
#(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidGVyZW50ZXYiLCJhIjoiY2sycDN1Z21zMDBheTNrbzZ2aG42aWUyMiJ9._2hucdk7L6jhzEHE6LGv9A';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/terentev/ck2so0c4h1q5x1cqow0aj9nh8',
center: [34.047, 63.779],
zoom: 4.41
});
</script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
index.razor:
#page "/"
<div id='map'></div>
Did so:
#page "/"
#inject IJSRuntime JSRuntime;
<div id='map'></div>
#code {
protected override void OnAfterRender(bool firstRender)
{
JSRuntime.InvokeVoidAsync("mapBoxFunctions.initMapBox");
}
}
P.S. I noticed that despite the fact that the site seems to work fine, but in the console you can see an error at startup
Can't anybody say how to fix the problem.
After publishing the application - no error is visible in the browser
I am using Mapbox API to create simple maps and learn. I have written a very simple code to display the centre on some coordinates but the map won't show.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.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>
L.mapbox.accessToken = 'pk.eyJ1Ijoicm9oYW4wNzkzIiwiYSI6IjhFeGVzVzgifQ.MQBzoHJmjH19bXDW0b8nKQ';
var map = L.mapbox.map('map', {
center: [28.611690, 77.191008],
zoom: 13
});
</script>
</body>
</html>
What am I doing wrong here?
You're using the wrong parameters for L.mapbox.map, the first element is correct, that's for the ID of a HTML element or a reference to an HTML element. The second however, isn't for the options object. The second is for your mapbox mapid (or url, or tilejson), which you get when you create your own map via the Mapbox editor: https://www.mapbox.com/editor/#app The third parameter is for the options object.
L.mapbox.accessToken = 'pk.eyJ1IjoicGF1bC12ZXJob2V2ZW4iLCJhIjoiZ1BtMWhPSSJ9.wQGnLyl1DiuIQuS0U_PtiQ';
var map = L.mapbox.map('map', 'examples.map-i86nkdio', {
center: [28.611690, 77.191008],
zoom: 13
});
I have a comboxbox loading its data from a url store. My code is below... What I noticed in Firebug is that the Combobox loads this info once I put the focus on it. I would love to have the Combobox to populate when the page is done loading.I am guessing I use dojo.ready for this? Does anyone have a suggestion as to how I would pull this off? Many thanks! Janie
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="lib/dojo/dijit/themes/claro/claro.css" />
<style type="text/css">html, body {
width: 100%;
height: 100%;
margin: 0;
}</style>
<script src="lib/dojo/dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>
<script>require(["dojo/ready", "dojo/data/ItemFileReadStore", "dijit/form/ComboBox"]);
</script>
</head>
<body class="claro">
<label for="user">User: </label>
<div dojoType="dojo.data.ItemFileReadStore" url="test.json" jsId="countryStore">
<input dojoType="dijit.form.ComboBox" searchAttr="last_name" store="countryStore" class="selectionNav tableData" value="" name="last_name" id="test.json" />
</body>
</html>
your require function should look something like this
require(["dojo/ready", "dijit/registry", "dojo/data/ItemFileReadStore"],function(dom,reg,store){
var combo = dijit.byId("test.json");
var storeDate = new store({url:"path/to/file.json"});
try{
combo.store(storeData);
}catch(e){
combo.set("store",storeData)
}
});
the try catch statement is because I don't remember which is the correct one