hassanlatif / google-map-chart-marker-clusterer Goto Github PK
View Code? Open in Web Editor NEWExtension of Google maps marker clusterer library to categorize map pins and use pie charts as cluster markers
License: MIT License
Extension of Google maps marker clusterer library to categorize map pins and use pie charts as cluster markers
License: MIT License
Move the cursor to pie chart tool tip is blinking. its not showing properly
Hi hassanlatif,
I have tried the example code and trimmed it a little bit. I can see the clustering happening but there is no pie chart on the clustered markers instead its only showing numbers there. Can you please have a look at my html code and tell me what I am doing wrong. Thanks.
<title>MarkerClusterer v3 Simple Example</title> <style> body { margin: 0; padding: 10px 20px 20px; font-family: Arial; font-size: 16px; } #map-container { padding: 6px; border-width: 1px; border-style: solid; border-color: #ccc #ccc #999 #ccc; -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px; -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px; box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px; width: 800px; } #map { width: 800px; height: 600px; } </style> <script src="C:\Users\Praveen\Desktop\traffic.json"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script> <script> function initialize() { var center = new google.maps.LatLng(59.9214, 10.8463); var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP, });
var opt = {
gridSize: 200
};
var markers = [];
for (var i = 0; i < data.features.length; i++) {
var accident_injuries = data.features[i].properties["5074"];
var accident_title = "";
var accident_lnglat = data.features[i].geometry["coordinates"];
switch (Number(accident_injuries)) {
case 1:
accident_title = "Fatal";
break;
case 3:
accident_title = "Serious injuries";
break;
case 2:
accident_title = "Very serious injuries";
break;
case 5:
accident_title = "No injuries";
break;
case 4:
accident_title = "Minor injuries";
break;
case 6:
accident_title = "Not recorded";
break;
}
var accident_LatLng = new google.maps.LatLng(Number(accident_lnglat[1]), Number(accident_lnglat[0]));
var marker = new google.maps.Marker({
position: accident_LatLng,
title: accident_title
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers, opt);
}
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(initialize);
</script>
Hi contributors and other users,
I saw this post and it is exactly what I do need to plot my data for my PhD thesis. However, I am new and I don’t know how to use this kind of scripts.
Currently, I managed to plot my data in a interactive map in RStudio using tmap, leaflet and mapview packages. This is the results I have:
I would love to have instead of clusters defined by density, clusters showing a pie chart with the different % of colour.
To reach there, I used two kind of files; a Shapefile of UK and a csv file with my data displayed as followed, with four columns, ID, Longitude, Latitude and Colour (the categorical column).
The code I used is the following:
library(maps)
library(tidyverse)
library(sf)
library(raster)
library(dplyr)
library(spData)
library(spDataLarge)
library(data.table)
library(raster)
library(tmap) # for static and interactive maps
library(leaflet) # for interactive maps
library(mapview) # for interactive maps
library(ggplot2) # tidyverse data visualization package
library(shiny) # for web applications
library(rgdal)
cepaea <- read_csv("C:/Users/stxdr3/Desktop/shell_recognition/Maps/iNaturalist_map.csv")
cepaea <- cepaea %>%
st_as_sf(coords = c("Longitude", "Latitude"), crs = 4326) %>%
st_cast("POINT")
###Then the GB shapefiles are loaded and the intersections between the two datasets are calculated.
GB <- read_sf("C:/Users/stxdr3/Documents/england/GB/gb_100km.shp") %>%
st_transform(4326)
GB_union <- st_union(GB)
cepaea_m <- st_intersects(GB_union, cepaea)
cepaea <- cepaea[unlist(cepaea_m), ]
tmap_mode("view")
map_GB <- tm_shape(cepaea) +
tm_dots(
group = "Colour",
col = "Colour",
palette = c(Brown='brown', Pink='#FA05C6', Yellow='yellow'),
icon = icons,
popup.vars = TRUE, clustering = markerClusterOptions()
)
map_GB
Is there any way I can use the JS script showed here to link it with mine and generate a similar map using my data?
Thank you very much,
Best wishes,
Daniel
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.