First off I'm a novice at JS so please bear with me if this is a simple task to complete.
I'm currently using the stock LeafletJS popup bubble to display the properties from my geoJSON. However, I would like to utilize the jQuery Mobile Panel to display the properties from my geoJSON file when it is clicked on, it is similar to the OpenLayers example here. Thanks in advance!
UPDATE:
Here is the js that I am using to load the geoJSON as well as the stock popup from Leaflet:
$.getJSON(dict[geoJSON Variable Goes here],
function(data){
L.geoJson(data, {
style: style,
onEachFeature: function (feature, layer){
if (feature.properties.SOMETHING == 0){
return layer.bindPopup("<b><em>" + feature.properties.Name + "</em> LABEL<br />LABEL</b>");}
else if (feature.properties.Attacks == 1){
return layer.bindPopup("<b><em>" + feature.properties.Name + "</em> LABEL<br />" + feature.properties.SOMETHING + " label</b>");}
else {
return layer.bindPopup("<b><em>" + feature.properties.Name + "</em> LABEL<br />" + feature.properties.SOMETHING + " label</b>");
}
},
}).addTo(GROUPLAYER FOR LAYER ON/OFF);
});
I am using jQuery Mobile to display multiple maps and right now everything is working fine but the geoJSON has a lot of data that I need to show so any help with this would be appreciated.
Yes it possible.
Simply use:
marker.on("click",popMobilePanel);
function popMobilePanel(event){
//make your modal appear
}
Related
I wanted to capture a google map image using html2canvas but the problem is when I capture the image I can not see the google map except the direction. Can somebody please help me with this.Below is the reference image as well I am attaching code with this.
function getScreenShot() {
html2canvas(document.querySelector("#map")).then(canvas => {
var img = canvas.toDataURL();
window.open(img);
height=height,
width=width
});
}
Before capturing image.
After capturing image.
Why don't you use staticmap concept of google map? Using staticmap you can easily create the image. You can see below function for the same.
function getScreenShot() {
//google static map url
var staticM_URL = "https://maps.googleapis.com/maps/api/staticmap";
//Set the Google Map Center.
staticM_URL += "?center=" + mapOptions.center.lat() + "," + mapOptions.center.lng();
staticM_URL += "&size=520x650"; //Set the Google Map Size.
staticM_URL += "&zoom=" + mapOptions.zoom; //Set the Google Map Zoom.
staticM_URL += "&maptype=" + mapOptions.mapTypeId;//Set the Google Map Type.
//Loop and add Markers.
for (var i = 0; i < markers.length; i++) {
staticM_URL += "&markers=color:red|" + markers[i].lat + "," + markers[i].lng;
}
window.open(staticM_URL);
}
Some reference urls which will help you.
https://staticmapmaker.com/google/
https://www.aspsnippets.com/Articles/Take-Screenshot-Snapshot-of-Google-Maps-using-JavaScript.aspx
In dc.leaflet version 0.2.3 for the Choropleth Chart the popup doesn't work or it doesn't get rendered. Am I wrong or it happens to anybody else? I will be happy to fix that but I would need some help.
.renderPopup(true)
.popup(function(d,feature) {
return feature.properties.name+" : "+d.value;
});
Anyway, any help would be really appreciated
https://github.com/dc-js/dc.leaflet.js/issues/22
Thanks in advance
The popup in the addons also did not work for me. However, you can apply the same logic to the standard dc_leaflet.markerChart function and achieve the popups.
Here is an example usage that worked:
var marker = dc_leaflet.markerChart("#demo1 .map", groupname) //map formatting
.dimension(restaurantNames)
.group(restaurantsGroup)
.width(700) //was 600
.height(500)
.center([43.733372, -79.354782]) //was 42.69,25.42
.zoom(11) //was 7s
.cluster(true) //was true
.valueAccessor(function(kv) {
return kv.value.count;
})
.locationAccessor(function(kv) {
return [kv.value.latitude,kv.value.longitude] ;
})
.popup(function(kv,marker) {
return kv.value.name + " - " + kv.value.stars + " * - " +
kv.value.price_range + "$";
});
I have used Bing Maps onto my website, in which I used Script
<script>
$(document).ready(function () {
var map = null;
function LoadMap() {
map = new Microsoft.Maps.Map(
document.getElementById('bing_maps_content'),
{
credentials: ".............."
});
}
$('#btnlocation').click(function () {
var url = "/Home/getlocation";
$.getJSON(url, null, function (data) {
$.each(data, function (index, LocationData) {
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
pushpin.setLocation(new Microsoft.Maps.Location(
LocationData.longitutde,
LocationData.latitude
));
map.entities.push(pushpin);
map.setView({
zoom: 4, centre: new Microsoft.Maps.Location("-37.81633","144.97097")
});
});
});
});
LoadMap();
});
$(".jump-response").each(function () {
var hue = 'rgb(' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ',' + (Math.floor((256 - 199) * Math.random()) + 200) + ')';
$(this).css("background-color", hue);
});
and loaded the data using controller and Model using Microsoft Bing map tutorial C# MVC . It works fine but when displayed onto my website it becomes like this.
It's displaying these diamond white shapes even if I zoom in. How do I get rid of these covering the map?
lol, wow, that is impressive. In the 9+ years I have been working with Bing Maps I have never seen that before.
Ok, now onto solving the issue. The code you provided won't cause this effect. It looks like each circle consists of a single map tile which is nothing more than an image tag. I suspect that somewhere in your application you have a CSS style for images that gives them a large border radius in order to make them look like circles. This style appears to be applied to all images in your app. Take a look at your CSS and look for any definitions on the img tag.
We're phasing out the Highcharts javascript visualization lib from our interactive statistics research application. It was already replaced with Rickshaw. Just now a new request came in: One certain use case has the graph display with the measurements displayed in the graph directly. This has been the case while using Highcharts (which has an option for that; called dataLabelsActivated). That should still be the case when using Rickshaw. I haven't yet found an option to make it do that. Any ideas?
How it used to display with Highcharts - highlighted in red are the measurements that should be there when using Rickshaw:
How it currently display with Rickshaw:
Apparently rickshaw doesn't support this natively. I might've done that by extending rickshar through the d3 library it is based upon (which seems to be able to do what I intended to achieve, according to the examples on its website). However, I ended up with a simple solution - added the data labels as divs manually, dependent on the distance of each datapoint from the top left corner of the graph element. Below code searches the data attribute of the graph for the data to display in labels using the color of the datapoint as it is the sole item to match a datapoint with the information in the data attribute.
$(".pointMarker").each(function( index ) {
var percentage = 0;
var currentMarkerColor = self.rgb2hex($( this ).css("border-top-color"));
self.graph.series.forEach(function(series) {
if(currentMarkerColor === series.color) {
if ( !/undef/i.test(typeof series.data[index])) {
percentage = parseFloat(series.data[index].y).toFixed(2);
}
//end loop
return false;
}
});
if (percentage > 0) {
var totalHeight = $( this ).parent().height();
var distanceTop = $( this ).css("top").replace(/[^-\d\.]/g, '') ;
//display data
$( this ).parent().append( "<div class='dataLabel' style='top:"+(parseInt($(this).css('top'), 10)-5)+"px;left:"+(parseInt($(this).css('left'), 10)-9)+"px;height:100px;width:100px;'>"+percentage+"</div>" );
}
});
and
this.rgb2hex = function (rgb){
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return "#" +
("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
}
I'm running a prototype script (lightbox) and I want to add an extra link below each image with the url to a page that changes with each image.
I have so far managed to add the a element to the right place, but later in the script I need to update the href of the link based on the image that is loaded.
There's a point in the script where the image is inserted into the lightbox after loading/navigating the lightbox:
showImage: function(){
this.loading.hide();
new Effect.Appear(this.lightboxImage, {
duration: this.resizeDuration,
queue: 'end',
afterFinish: (function(){ this.updateDetails(); }).bind(this)
});
this.preloadNeighborImages();
},
After it's finished it runs updateDetails, which includes the images' caption. This seemed to me the perfect place to also update the link:
updateDetails: function() {
// if caption is not null
if (this.imageArray[this.activeImage][1] != ""){
this.caption.update(this.imageArray[this.activeImage][1]).show();
}
// if image is part of set display 'Image x of x'
if (this.imageArray.length > 1){
this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length).show();
}
/** slider effect cut from example code for the sake of brevity **/
}
I've tried many variations based on the codes used in these functions, but nothing seems to work. How do I update the href of a link with id=toFilePage?
I figured it'd be something like
this.toFilePage.href.update('http://example.com');
But that doesnt seem to work..
I believe the problem may lie within this section (starting at line 175 in lightbox.js)
(function() {
var ids = 'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' + 'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';
$w(ids).each(function(id) {
th[id] = $(id);
});
}).defer();
This creates references to the objects created in the Builder section above it. Simply adding your id to that list should do the trick.
Otherwise you may also access it through $("myIdHere").