Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: imk13/bubble_maps
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: master
Choose a base ref
...
head repository: Anujarya300/bubble_maps
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
Able to merge. These branches can be automatically merged.
  • 7 commits
  • 4 files changed
  • 2 contributors

Commits on May 31, 2019

  1. Update README.md

    @Anujarya300
    Anujarya300 authored May 31, 2019
    Copy the full SHA
    f3c42a4 View commit details

Commits on Dec 5, 2019

  1. updated india topology json 

    updated india topology json as per the lastest India map
    @Anujarya300
    Anujarya300 authored Dec 5, 2019
    Copy the full SHA
    cdf81d1 View commit details

  2. added state code as id in all states.

    Rana authored and Rana committed Dec 5, 2019
    Copy the full SHA
    cf97ec6 View commit details

  3. Merge branch 'master' of https://github.com/Anujarya300/bubble_maps

    Rana authored and Rana committed Dec 5, 2019
    Copy the full SHA
    e6ee06b View commit details

  4. removed space

    Rana authored and Rana committed Dec 5, 2019
    Copy the full SHA
    84b0ea5 View commit details

  5. updated India image with JK and other states fixed.

    Rana authored and Rana committed Dec 5, 2019
    Copy the full SHA
    f056305 View commit details

Commits on Dec 25, 2019

  1. added latutude and longitude example.

    Rana authored and Rana committed Dec 25, 2019
    Copy the full SHA
    452bdbe View commit details
Showing with 114 additions and 2 deletions.
  1. +46 −1 README.md
  2. +1 −1 data/geography-data/india.topo.json
  3. BIN images/india.jpg
  4. +67 −0 india_bubble_latitude_longitude.html
47 changes: 46 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# bubble_maps
# bubble_maps (Create any country's map using custom maps)
Inspired by @markmarkoh from his repository Datamaps at https://github.com/markmarkoh/datamaps.

I have created the example for bublble map for three countries. India, USA and Canada as you can find in the repository
@@ -38,6 +38,51 @@ I have created the example for bublble map for three countries. India, USA and C
return { path: path, projection: projection };
}
});
// bubbles based on state or ISO code (i.e. bubbles on center of state)
// use centered property
let bubbles = [
{
centered: "MH",
fillKey: "MAJOR",
radius: 20,
state: "Maharastra"
},
{
centered: "UP",
fillKey: "MAJOR",
radius: 22,
state: "Uttar Pradesh"
}
]
// bubbles based on the co-ordinates of the state/city or any
// use latitute and longitude properties
// let bubbles = [
// {
// latitude: 19.7515,
// longitude: 75.7139,
// fillKey: "MAJOR",
// radius: 20,
// state: "Maharastra"
// },
// {
// latitude: 25.7677,
// longitude: 80.6627,
// fillKey: "MAJOR",
// radius: 22,
// state: "Uttar Pradesh"
// }
// ]
// // ISO ID code for city or <state></state>
setTimeout(() => { // only start drawing bubbles on the map when map has rendered completely.
bubble_map.bubbles(bubbles, {
popupTemplate: function (geo, data) {
return `<div class="hoverinfo">city: ${data.state}, Slums: ${data.radius}%</div>`;
}
});
}, 1000);
```

###### Set the correct projection for India map on world map with the help of Longitude and Latitute of India (you can google it India Longitude and Latitute)
2 changes: 1 addition & 1 deletion data/geography-data/india.topo.json
View file

Large diffs are not rendered by default.

Binary file modified images/india.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
67 changes: 67 additions & 0 deletions india_bubble_latitude_longitude.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<meta charset="utf-8">

<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://rawgit.com/Anujarya300/bubble_maps/master/data/geography-data/datamaps.none.js"></script>
<div id="india" style="height: 600px; width: 900px;"></div>
<script>
var bubble_map = new Datamap({
element: document.getElementById('india'),
scope: 'india',
geographyConfig: {
popupOnHover: true,
highlightOnHover: true,
borderColor: '#444',
borderWidth: 0.5,
dataUrl: 'https://rawgit.com/Anujarya300/bubble_maps/master/data/geography-data/india.topo.json'
//dataJson: topoJsonData
},
fills: {
'MAJOR': '#306596',
'MEDIUM': '#0fa0fa',
'MINOR': '#bada55',
defaultFill: '#dddddd'
},
data: {
'JH': { fillKey: 'MINOR' },
'MH': { fillKey: 'MINOR' }
},
setProjection: function (element) {
var projection = d3.geo.mercator()
.center([78.9629, 23.5937]) // always in [East Latitude, North Longitude]
.scale(1000);
var path = d3.geo.path().projection(projection);
return { path: path, projection: projection };
}
});

let bubbles = [
{
latitude: 19.7515,
longitude: 75.7139,
fillKey: "MAJOR",
radius: 20,
state: "Maharastra"
},
{
latitude: 25.7677,
longitude: 80.6627,
fillKey: "MAJOR",
radius: 22,
state: "Uttar Pradesh"
}
]
// // ISO ID code for city or <state></state>
setTimeout(() => { // only start drawing bubbles on the map when map has rendered completely.
bubble_map.bubbles(bubbles, {
popupTemplate: function (geo, data) {
return `<div class="hoverinfo">city: ${data.state}, Slums: ${data.radius}%</div>`;
}
});
}, 1000);
</script>
</body>

</html>