How to use @hpcc-js/map - 10 common examples
To help you get started, we’ve selected a few @hpcc-js/map examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
hpcc-systems / Visualization / demos / gallery / samples / geospatial / Choropleth / Europe / West Europe.js View on Github 
import { Layered, TopoJSONChoropleth, topoJsonFolder } from "@hpcc-js/map";
topoJsonFolder("https://cdn.jsdelivr.net/npm/@hpcc-js/map@2.0.0/TopoJSON");
const pt = new TopoJSONChoropleth() // Great Brittan
.region("PT")
;
const es = new TopoJSONChoropleth() // Northern Ireland
.region("ES")
;
const fr = new TopoJSONChoropleth() // Republic of Ireland
.region("FR")
;
new Layered()
.layers([
pt,import { Layered, TopoJSONChoropleth, topoJsonFolder } from "@hpcc-js/map";
topoJsonFolder("https://cdn.jsdelivr.net/npm/@hpcc-js/map@2.0.0/TopoJSON");
const gb = new TopoJSONChoropleth() // Great Brittan
.region("GB")
;
const nd = new TopoJSONChoropleth() // Northern Ireland
.region("ND")
;
const ie = new TopoJSONChoropleth() // Republic of Ireland
.region("IE")
;
new Layered()
.layers([
gb,topoJsonFolder("https://cdn.jsdelivr.net/npm/@hpcc-js/map@2.0.0/TopoJSON");
const gb = new TopoJSONChoropleth() // Great Brittan
.region("GB")
;
const nd = new TopoJSONChoropleth() // Northern Ireland
.region("ND")
;
const ie = new TopoJSONChoropleth() // Republic of Ireland
.region("IE")
;
new Layered()
.layers([
gb,
nd,
ie,
])
.target("target")
.render()
;
const eu_countries = ["AT", "BE", "BG", "CHLI", "CY", "CZ", "DE", "DK", "EE", "ES", "FI", "FR", "GB", "GE", "GR", "HR", "HU", "IE", "IS", "IT", "KS", "LT", "LU", "LV", "MD", "MK", "MT", "ND", "NL", "NO", "PL", "PT", "RO", "RS", "SE", "SI", "SK", "UA"];topoJsonFolder("https://cdn.jsdelivr.net/npm/@hpcc-js/map@2.0.0/TopoJSON");
const pt = new TopoJSONChoropleth() // Great Brittan
.region("PT")
;
const es = new TopoJSONChoropleth() // Northern Ireland
.region("ES")
;
const fr = new TopoJSONChoropleth() // Republic of Ireland
.region("FR")
;
new Layered()
.layers([
pt,
es,
fr,
])
.target("target")
.render()
;
const eu_countries = ["AT", "BE", "BG", "CHLI", "CY", "CZ", "DE", "DK", "EE", "ES", "FI", "FR", "GB", "GE", "GR", "HR", "HU", "IE", "IS", "IT", "KS", "LT", "LU", "LV", "MD", "MK", "MT", "ND", "NL", "NO", "PL", "PT", "RO", "RS", "SE", "SI", "SK", "UA"];import { Layered, TopoJSONChoropleth, topoJsonFolder } from "@hpcc-js/map";
topoJsonFolder("https://cdn.jsdelivr.net/npm/@hpcc-js/map@2.0.0/TopoJSON");
const gb = new TopoJSONChoropleth() // Great Brittan
.region("GB")
;
const nd = new TopoJSONChoropleth() // Northern Ireland
.region("ND")
;
const ie = new TopoJSONChoropleth() // Republic of Ireland
.region("IE")
;
new Layered()
.layers([
gb,
nd,
ie,
])
.target("target")
.render()
;import { Layered, TopoJSONChoropleth, topoJsonFolder } from "@hpcc-js/map";
topoJsonFolder("https://cdn.jsdelivr.net/npm/@hpcc-js/map@2.0.0/TopoJSON");
const pt = new TopoJSONChoropleth() // Great Brittan
.region("PT")
;
const es = new TopoJSONChoropleth() // Northern Ireland
.region("ES")
;
const fr = new TopoJSONChoropleth() // Republic of Ireland
.region("FR")
;
new Layered()
.layers([
pt,
es,
fr,
])
.target("target")
.render()
;
const eu_countries = ["AT", "BE", "BG", "CHLI", "CY", "CZ", "DE", "DK", "EE", "ES", "FI", "FR", "GB", "GE", "GR", "HR", "HU", "IE", "IS", "IT", "KS", "LT", "LU", "LV", "MD", "MK", "MT", "ND", "NL", "NO", "PL", "PT", "RO", "RS", "SE", "SI", "SK", "UA"];[45.786490, -108.526600, 45.796180, -108.535652],
[45.796180, -108.535652, 45.774320, -108.494370],
[45.774320, -108.494370, 45.777062, -108.549835],
[45.777062, -108.549835, 51.897969, -8.475438]]),
new Pins()
.opacity(0.75)
.columns(geo.GMap.simple.columns)
.data(geo.GMap.simple.data)
]);
render(layered);
break;
case CanvasPinLayer:
case Graph:
break;
case Leaflet.ClusterPins:
render(new Leaflet.ClusterPins()
.columns(flightPath.columns)
.data(flightPath.data)
.latitudeColumn("dest_lat")
.longitudeColumn("dest_long")
);
break;
default:
it.skip("Has test", () => {
expect(false).to.be.true;
});
}
}
});
}[45.777062, -108.549835, 51.897969, -8.475438]]),
new Pins()
.opacity(0.75)
.columns(geo.GMap.simple.columns)
.data(geo.GMap.simple.data)
]);
render(gmapLayered);
break;
case Graticule:
render(new Graticule());
break;
case OpenStreet:
render(new OpenStreet());
break;
case Layered:
const layered = new Layered()
.layers([
new Graticule(),
new ChoroplethContinents(),
new ChoroplethStates()
.columns(geo.States.simple.columns)
.data(geo.States.simple.data),
new Lines()
.opacity(0.75)
.columns(["fromLatitude", "fromLongitude", "toLatitude", "toLongitude"])
.data([[51.897969, -8.475438, 35.652930, 139.687128],
[35.652930, 139.687128, 37.665074, -122.384375],
[37.665074, -122.384375, 32.690680, -117.178540],
[32.690680, -117.178540, 39.709455, -104.969859],
[39.709455, -104.969859, 41.244123, -95.961610],
[41.244123, -95.961610, 32.688980, -117.192040],
[32.688980, -117.192040, 45.786490, -108.526600],);
break;
case GMapPin:
render(new GMapPin()
.columns(flightPath.columns)
.data(flightPath.data)
.latitudeColumn("dest_lat")
.longitudeColumn("dest_long")
);
break;
case GMapPinLine:
const gmapLayered = new GMapLayered()
.layers([
new Graticule(),
new ChoroplethContinents(),
new ChoroplethStates()
.columns(geo.States.simple.columns)
.data(geo.States.simple.data),
new Lines()
.opacity(0.75)
.columns(["fromLatitude", "fromLongitude", "toLatitude", "toLongitude"])
.data([[51.897969, -8.475438, 35.652930, 139.687128],
[35.652930, 139.687128, 37.665074, -122.384375],
[37.665074, -122.384375, 32.690680, -117.178540],
[32.690680, -117.178540, 39.709455, -104.969859],
[39.709455, -104.969859, 41.244123, -95.961610],
[41.244123, -95.961610, 32.688980, -117.192040],
[32.688980, -117.192040, 45.786490, -108.526600],
[45.786490, -108.526600, 45.796180, -108.535652],
[45.796180, -108.535652, 45.774320, -108.494370],
[45.774320, -108.494370, 45.777062, -108.549835],
[45.777062, -108.549835, 51.897969, -8.475438]]),.data(geo.GeoHash.map(function (row) { return [row.term, row.count]; }))
);
break;
case GMap:
render(new GMap()
.columns(geo.GMap.simple.columns)
.data(geo.GMap.simple.data)
);
break;
case GMapCounties:
render(new GMapCounties()
.columns(geo.Counties.simple.columns)
.data(geo.Counties.simple.rawData));
break;
case GMapGraph:
render(new GMapGraph()
.columns(geo.GMap.graph.columns)
.data(geo.GMap.graph.data)
);
break;
case GMapPin:
render(new GMapPin()
.columns(flightPath.columns)
.data(flightPath.data)
.latitudeColumn("dest_lat")
.longitudeColumn("dest_long")
);
break;
case GMapPinLine:
const gmapLayered = new GMapLayered()
.layers([
new Graticule(),
Popular @hpcc-js/map functions
- @hpcc-js/map.ChoroplethContinents
- @hpcc-js/map.ChoroplethCounties
- @hpcc-js/map.ChoroplethCountries
- @hpcc-js/map.ChoroplethStates
- @hpcc-js/map.GMap
- @hpcc-js/map.GMapGraph
- @hpcc-js/map.GMapPin
- @hpcc-js/map.Graticule
- @hpcc-js/map.Layered
- @hpcc-js/map.Leaflet.Circles
- @hpcc-js/map.Leaflet.ClusterCircles
- @hpcc-js/map.Leaflet.ClusterPins
- @hpcc-js/map.Leaflet.Leaflet
- @hpcc-js/map.Leaflet.Lines
- @hpcc-js/map.Leaflet.Pins
- @hpcc-js/map.Leaflet.Polygons
- @hpcc-js/map.Leaflet.USStates
- @hpcc-js/map.Pins
- @hpcc-js/map.TopoJSONChoropleth
- @hpcc-js/map.topoJsonFolder