I'm not at all a programmer, so I politely ask for your patience.
I maintain a leaflet.js webpage with a bunch of wms services and stuff I use in my daily work. However not all data are that easily rendered. There's no api for oblique aerial photos of my country, but the photos are available on a website, where the map-position is in the URL. Like this:
https://skraafoto.kortforsyningen.dk/oblivisionjsoff/index.aspx?project=Denmark&lon=10.2027929&lat=56.1377927
So I was wondering. How would you get a coordinate from leaflet, transform it into a URL, and open the webpage?
Solved by adding a pop-up
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent('<a href=https://skraafoto.kortforsyningen.dk/oblivisionjsoff/index.aspx?project=Denmark&lon=' + e.latlng.lng.toString() + '&lat=' + e.latlng.lat.toString() + ' target=_blank>Skråfotos</a>')
.openOn(map);
}
map.on('click', onMapClick);
Related
I am trying to allow a mapbox marker to be clicked on and when clicked it automatically takes you to a new link.
Is this possible?
I currently have a map of 10 locations and when loaded the zoom level shows all. When you click on a location, it zooms you into that location.
I now want it to take you through to a url on the click rather than zoom in, however I cant seem to find any documentation on how to do it.
I am aware that it can be done using a popup box which contains a url in it, but is there a way to remove the extra step.
Thank you
You can use click event on your layer to get the feature clicked and use a property of your feature to build your link :
map.on('click', 'layername', function(e) {
// Here you can access e.features[0] which is the feature cliked
// With that you can do whatever you want with your feature
});
Sébastien Bousquet's answer work when using a Symbol, but if using a Marker, you'll need to add your your own click eventlistener like https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event.
marker.getElement().addEventListener('click', event => {
window.location.href = 'https://www.mapbox.com/';
});
i try to figure out this problem since a few days but i'm stuck.
I want that Google Analytics count each hash url from my gallery as a page view.
I use Grand Media Gallery, with photobox template. >> http://codeasily.com/portfolio-item/gmedia-photobox/
If you click on a picture, a new url is load ex : http://codeasily.com/portfolio-item/gmedia-photobox/#photoBox-43
Unfortunately, GA doesn't count that for a page view. Or i need that stats to know which image is the most viewed on my website.
I try to add that to GA tracking code :
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-17649764-10', 'auto');
ga('send', 'pageview', {'page': location.pathname+location.search+location.hash});
window.onhashchange = function() {
ga('send', 'pageview', {'page': location.pathname+location.search+location.hash});
}; </script>
But that's not work neither...
i already found that question Google Analytics Setting Up A PageView On Hash Change
But i'm not using isotope, and i already add this to GA tracking code without result. My problem is the page doesn't reload whent users watch my photos...
ga('send', 'pageview', {'page': location.pathname + location.search + location.hash});
Thank you for your help,
Foub
You can do that with Google Tag Manager. The main GA tracking code is fired on trigger History Source equals pushState, in addition to the standard All Pages trigger. And you just need to specify the page path with the fragment in a JS variable, like this:
function() {
return {{Event}} === 'gtm.historyChange' && {{New History Fragment}} ? {{Page Path}} + '#' + {{New History Fragment}} : undefined;
}
I need to change my url because I want modify my view map, but I don´t know how I change this url.
I want modify this:
L.tileLayer('https://{s}.tiles.mapbox.com/v4/mysaqygi.m8jo7i0g/{z}/{x}/{y}.png'
I use mapbox, but I don´t know how to change this url when I create my map.
where do I change this?
I use leaflet to programming the visualization map
Thank you very much!
You can assign to variable like:
var url1 = 'https://{s}.tiles.mapbox.com/v4/mysaqygi.m8jo7i0g/{z}/{x}/{y}.png';
var tileLayer = L.tileLayer(url1,{});
and then
tileLayer.setUrl(url2);
http://leafletjs.com/reference.html#tilelayer-seturl
You can see here a demo of leaflet basemaps.
I've been attempting to render a ChartJS graph on pages a user loads with a Firefox add-on. I'm using the add-on SDK to insert a PageMod to every page:
pageMod.PageMod({
include: "*",
contentScriptFile: [data.url("jquery.js"),
data.url("Chart.js"),
data.url("onPageLoad.js")]
});
In my onPageLoad.js, I insert an HTML5 canvas element using jQuery, and then try to draw my graph on it:
var chartData = [{value:100,color:'#4C86B9',highlight:'#508CC2',label:'Blue Team'},{value:150,color:'#B9525C',highlight:'#C25660',label:'Red Team'}];
$(document).ready(function() {
var ctx = document.getElementById("chart-area").getContext("2d");
var myPieChart = new Chart(ctx).Pie(chartData, {responsive:true});
});
This only causes the canvas to expand in area (I can see its parent div element expanding), but no graph is rendered. Thus, I know that the libraries are indeed being loaded. The closest question I could find on SO is ChartJS is not rendered, but this is actually a completely different problem. I can trivially draw a rectangle to my canvas:
ctx.fillRect(10,20,200,100);
So if it's not a problem with the canvas itself, why is this ChartJS graph not rendering?
Are the jquery./js, chart.js and onpageload.js files located in your data folder? If that isnt the problem, then the problem may be cross domain thing, so youll have to get around by setting content script policies: How to add Content Security Policy to Firefox extension
I am adding bing maps to one of our sites. I am able to show pushpins and infoboxes.
The problem I am facing now is the infobox content go out of the white box.
Is there a way to have autoadjusting infoboxes for bing maps or its CSS?
Fixed using Jquery:
function displayInfobox(e) {
pinInfobox.setOptions({description: e.target.Description, visible:true, offset: new Microsoft.Maps.Point(0,4)});
pinInfobox.setLocation(e.target.getLocation());
map.setView({center:e.target.getLocation(),zoom:4});
adjustHeightInfobox();
}
function adjustHeightInfobox() {
var newHeight = jQuery(".infobox-info").height();
pinInfobox.setOptions({height:newHeight+15});
}
Assuming that you're using the default infobox within the AJAX control, you will be able to use the infoboxOption class where you can easily specify the width and height of the infobox.
See the MSDN for all options available on this specific class: http://msdn.microsoft.com/en-us/library/gg675210.aspx
If you want to adapt the infobox to your own needs (i.e. dynamic size), you can use your own HTML content and customize is with your own CSS, see: http://www.bingmapsportal.com/isdk/ajaxv7#Infobox14