How to use @here/harp-features-datasource - 10 common examples
To help you get started, we’ve selected a few @here/harp-features-datasource 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.
heremaps / harp.gl / @here / harp-examples / src / datasource_features_lines-and-points.ts View on Github 
* ```typescript
* [[include:harp_demo_features_linespoints_3.ts]]
* ```
*
* Note how the [[StyleSet]] of this example creates the text paths out of the line features. Also,
* we duplicate the line styles, one being a dashed line and the other a solid line, to have this
* specific look for the ridges and trenches. The point style is also duplicated, so that a bigger
* point is rendered below the first one, and creates an outline effect.
*/
export namespace LinesPointsFeaturesExample {
// snippet:harp_demo_features_linespoints_0.ts
const map = createBaseMap();
// end:harp_demo_features_linespoints_0.ts
// snippet:harp_demo_features_linespoints_3.ts
const featuresDataSource = new FeaturesDataSource();
map.addDataSource(featuresDataSource).then(() => {
const features = getFeatures(faults);
const styleSet = getStyleSet();
featuresDataSource.add(...features).setStyleSet(styleSet);
});
// end:harp_demo_features_linespoints_3.ts
function getFeatures(features: {
[key: string]: { [key: string]: number[][] };
}): MapViewFeature[] {
const featuresList: MapViewFeature[] = [];
for (const type of Object.keys(features)) {
for (const featureName of Object.keys(features[type])) {
const name = featureName.indexOf("unknown") === -1 ? featureName : undefined;
// snippet:harp_demo_features_linespoints_1.ts
const feature = new MapViewLineFeature(features[type][featureName], { name, type });*
* Then we create a [[MapViewFeature]] and add it to a [[FeaturesDataSource]] with a custom
* [[StyleSet]].
* ```typescript
* [[include:harp_simple_features_example_1.ts]]
* ```
*/
export namespace SimpleFeaturesExample {
// snippet:harp_simple_features_example_0.ts
const map = createBaseMap();
// end:harp_simple_features_example_0.ts
// snippet:harp_simple_features_example_1.ts
// We need to replicate the first point in the last coordinate to close the polygon.
const polygon = new MapViewPolygonFeature([[[10, 50], [10, 30], [5, 30], [5, 50], [10, 50]]]);
const featuresDataSource = new FeaturesDataSource();
map.addDataSource(featuresDataSource).then(() => {
featuresDataSource.add(polygon).setStyleSet([
{
technique: "fill",
when: "$geometryType == 'polygon'",
renderOrder: 10000,
attr: {
color: "#ff0000"
}
}
]);
});
// end:harp_simple_features_example_1.ts
function createBaseMap(): MapView {
document.body.innerHTML += getExampleHTML();k++;
}
if (stateGroup.indexOf("germany") > -1) {
age = steps.length;
}
// snippet:harp_demo_features_polygons_2.ts
for (const country of stateGroup) {
const feature = new MapViewMultiPolygonFeature(COUNTRIES[country], {
name: country,
joiningDate: getJoiningDate(j),
height: 25000 + age * 25000
});
features.push(feature);
}
const featuresDataSource = new FeaturesDataSource({
name: `member-states-${j}`,
styleSetName: "geojson",
features,
maxGeometryHeight: 300000
});
const addPromise = map.addDataSource(featuresDataSource);
addPromises.push(addPromise);
datasources.push(featuresDataSource);
// end:harp_demo_features_polygons_2.ts
}
return datasources;
}description: "South pole",
when: ["==", ["get", "kind"], "south_pole"],
technique: "fill",
attr: {
color: ["ref", "southPoleColor"]
},
renderOrder: 5
}
]
}
};
const map = createBaseMap(customizedTheme);
// end:harp_demo_features_linespoints_0.ts
// snippet:harp_demo_features_linespoints_3.ts
const featuresDataSource = new FeaturesDataSource({
name: "geojson",
styleSetName: "myStyleSet",
features: getFeatures(faults)
});
map.addDataSource(featuresDataSource);
// end:harp_demo_features_linespoints_3.ts
function getFeatures(features: {
[key: string]: { [key: string]: number[][] };
}): MapViewFeature[] {
const featuresList: MapViewFeature[] = [];
for (const type of Object.keys(features)) {
for (const featureName of Object.keys(features[type])) {
const name = featureName.indexOf("unknown") === -1 ? featureName : undefined;
// snippet:harp_demo_features_linespoints_1.ts
const feature = new MapViewLineFeature(features[type][featureName], { name, type });function getFeatures(features: {
[key: string]: { [key: string]: number[][] };
}): MapViewFeature[] {
const featuresList: MapViewFeature[] = [];
for (const type of Object.keys(features)) {
for (const featureName of Object.keys(features[type])) {
const name = featureName.indexOf("unknown") === -1 ? featureName : undefined;
// snippet:harp_demo_features_linespoints_1.ts
const feature = new MapViewLineFeature(features[type][featureName], { name, type });
// end:harp_demo_features_linespoints_1.ts
featuresList.push(feature);
}
}
// snippet:harp_demo_features_linespoints_1.ts
const hotspotsFeature = new MapViewMultiPointFeature(hotspots);
// end:harp_demo_features_linespoints_1.ts
featuresList.push(hotspotsFeature);
return featuresList;
}function getFeatures(features: {
[key: string]: { [key: string]: number[][] };
}): MapViewFeature[] {
const featuresList: MapViewFeature[] = [];
for (const type of Object.keys(features)) {
for (const featureName of Object.keys(features[type])) {
const name = featureName.indexOf("unknown") === -1 ? featureName : undefined;
// snippet:harp_demo_features_linespoints_1.ts
const feature = new MapViewLineFeature(features[type][featureName], { name, type });
// end:harp_demo_features_linespoints_1.ts
featuresList.push(feature);
}
}
// snippet:harp_demo_features_linespoints_1.ts
const hotspotsFeature = new MapViewMultiPointFeature(hotspots);
// end:harp_demo_features_linespoints_1.ts
featuresList.push(hotspotsFeature);
return featuresList;
}function getFeatures(features: {
[key: string]: { [key: string]: number[][] };
}): MapViewFeature[] {
const featuresList: MapViewFeature[] = [];
for (const type of Object.keys(features)) {
for (const featureName of Object.keys(features[type])) {
const name = featureName.indexOf("unknown") === -1 ? featureName : undefined;
// snippet:harp_demo_features_linespoints_1.ts
const feature = new MapViewLineFeature(features[type][featureName], { name, type });
// end:harp_demo_features_linespoints_1.ts
featuresList.push(feature);
}
}
// snippet:harp_demo_features_linespoints_1.ts
const hotspotsFeature = new MapViewMultiPointFeature(hotspots);
// end:harp_demo_features_linespoints_1.ts
featuresList.push(hotspotsFeature);
return featuresList;
}function getFeatures(features: {
[key: string]: { [key: string]: number[][] };
}): MapViewFeature[] {
const featuresList: MapViewFeature[] = [];
for (const type of Object.keys(features)) {
for (const featureName of Object.keys(features[type])) {
const name = featureName.indexOf("unknown") === -1 ? featureName : undefined;
// snippet:harp_demo_features_linespoints_1.ts
const feature = new MapViewLineFeature(features[type][featureName], { name, type });
// end:harp_demo_features_linespoints_1.ts
featuresList.push(feature);
}
}
// snippet:harp_demo_features_linespoints_1.ts
const hotspotsFeature = new MapViewMultiPointFeature(hotspots);
// end:harp_demo_features_linespoints_1.ts
featuresList.push(hotspotsFeature);
return featuresList;
}for (let j = 0; j < EU.statesGroup.length; j++) {
const stateGroup = EU.statesGroup[j];
const features: MapViewFeature[] = [];
let age = steps.length;
let k = 0;
while (EU.steps[steps[k]].joining.indexOf(j) === -1) {
age--;
k++;
}
if (stateGroup.indexOf("germany") > -1) {
age = steps.length;
}
// snippet:harp_demo_features_polygons_2.ts
for (const country of stateGroup) {
const feature = new MapViewMultiPolygonFeature(COUNTRIES[country], {
name: country,
joiningDate: getJoiningDate(j),
height: 25000 + age * 25000
});
features.push(feature);
}
const featuresDataSource = new FeaturesDataSource({
name: `member-states-${j}`,
styleSetName: "geojson",
features,
maxGeometryHeight: 300000
});
const addPromise = map.addDataSource(featuresDataSource);
addPromises.push(addPromise);
datasources.push(featuresDataSource);
// end:harp_demo_features_polygons_2.ts* ```
*
* Then we create a [[MapViewFeature]] and add it to a [[FeaturesDataSource]] with a custom
* [[StyleSet]].
* ```typescript
* [[include:harp_simple_features_example_1.ts]]
* ```
*/
export namespace SimpleFeaturesExample {
// snippet:harp_simple_features_example_0.ts
const map = createBaseMap();
// end:harp_simple_features_example_0.ts
// snippet:harp_simple_features_example_1.ts
// We need to replicate the first point in the last coordinate to close the polygon.
const polygon = new MapViewPolygonFeature([[[10, 50], [10, 30], [5, 30], [5, 50], [10, 50]]]);
const featuresDataSource = new FeaturesDataSource();
map.addDataSource(featuresDataSource).then(() => {
featuresDataSource.add(polygon).setStyleSet([
{
technique: "fill",
when: "$geometryType == 'polygon'",
renderOrder: 10000,
attr: {
color: "#ff0000"
}
}
]);
});
// end:harp_simple_features_example_1.ts
function createBaseMap(): MapView {@here/harp-features-datasource
Provides support for custom features
