डेटासेट की सुविधा वाली लेयर पर style प्रॉपर्टी को google.maps.FeatureStyleFunction पर सेट करके, डेटा सुविधाओं में स्टाइल लागू करें. इसमें स्टाइलिंग लॉजिक या google.maps.FeatureStyleOptions शामिल हो सकता है, ताकि लेयर के लिए सभी सुविधाओं को एक जैसा स्टाइल दिया जा सके. डेटा फ़ीचर में स्टाइल लागू की जा सकती हैं. जैसे, भरने के लिए (रंग, ओपैसिटी),
स्ट्रोक (रंग, ओपैसिटी, स्ट्रोक वेट), और डाइमीटर (पॉइंट). इस पेज पर, प्रोग्राम के हिसाब से डेटासेट को ऐक्सेस करने और उसकी सुविधाओं को स्टाइल करने का तरीका बताया गया है. साथ ही, पॉइंट, पॉलीगॉन, और पॉलीलाइन ज्यामिति के आधार पर डेटा की सुविधाओं को स्टाइल करने के उदाहरण भी दिए गए हैं.
डेटासेट के लिए डेटा-ड्रिवन स्टाइल, डेटासेट बनाने के लिए इस्तेमाल की गई भौगोलिक डेटा फ़ाइल के दिए गए अक्षांश और देशांतर निर्देशांक के आधार पर डेटा फ़ीचर को रेंडर करती है.
डेटा फ़ीचर एट्रिब्यूट
किसी डेटासेट का सारा डेटा, फ़ीचर स्टाइल फ़ंक्शन में ऐक्सेस किया जा सकता है. डेटा फ़ीचर एट्रिब्यूट पाने के लिए, सबसे पहले डेटासेट फ़ीचर पाएं. इसमें डेटासेट का सारा डेटा होता है. इसके बाद, अपनी पसंद का डेटा एट्रिब्यूट पाएं, जैसा कि यहां दिखाया गया है:
TypeScript
// Get the dataset feature, so we can work with all of its attributes. const datasetFeature = params.feature; // Get all of the needed dataset attributes. const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];
JavaScript
// Get the dataset feature, so we can work with all of its attributes. const datasetFeature = params.feature; // Get all of the needed dataset attributes. const furColors = datasetFeature.datasetAttributes["CombinationofPrimaryandHighlightColor"];
फ़ीचर स्टाइल के विकल्प
फीचर स्टाइल के विकल्प में, डेटा फीचर लेयर के लिए स्टाइल तय की जाती है. उदाहरण के लिए, पॉलीगॉन के लिए फ़िल और स्ट्रोक या पॉइंट का रंग और डाइमीटर तय करना. इस उदाहरण में, सुविधा के स्टाइल के विकल्प दिखाए गए हैं. इन्हें किसी सुविधा के लिए style प्रॉपर्टी का इस्तेमाल करके, सीधे तौर पर लागू किया जा सकता है:
TypeScript
// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, };
JavaScript
// Apply style to all features.
datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };
सुविधा के स्टाइल का फ़ंक्शन
डेटासेट की सुविधाओं को स्टाइल करने के लिए लॉजिक तय करने के लिए, फ़ीचर स्टाइल फ़ंक्शन का इस्तेमाल करें.
किसी सुविधा को स्टाइल करने के लिए, style प्रॉपर्टी को google.maps.FeatureStyleFunction पर सेट करें.
स्टाइल फ़ंक्शन वह जगह है जहां किसी सुविधा लेयर पर अलग-अलग सुविधाओं को स्टाइल देने के लिए लॉजिक तय किया जाता है. featureLayer.style सेट होने पर, स्टाइल फ़ंक्शन, जिस फ़ीचर लेयर पर असर पड़ा है उसमें मौजूद हर फ़ीचर पर लागू होता है. यह फ़ंक्शन, स्टाइल प्रॉपर्टी सेट करने के समय लागू होता है. इसे अपडेट करने के लिए, आपको स्टाइल प्रॉपर्टी दोबारा सेट करनी होगी. यहां दिए गए उदाहरण में, फ़ीचर स्टाइल का एक आसान फ़ंक्शन दिखाया गया है:
TypeScript
const styleDefault = {
strokeColor: 'green',
strokeWeight: 2.0,
strokeOpacity: 1.0,
fillColor: 'green',
fillOpacity: 0.3,
};
const styleClicked = {
...styleDefault,
strokeColor: 'blue',
fillColor: 'blue',
fillOpacity: 0.5,
};
const styleMouseMove = {
...styleDefault,
strokeWeight: 4.0
};
function applyStyle(/* FeatureStyleFunctionOptions */ params) {
const datasetFeature = params.feature;
// Note, 'globalid' is an attribute in this dataset.
//@ts-ignore
if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
return styleClicked;
}
//@ts-ignore
if (lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
return styleMouseMove;
}
return styleDefault;
}
JavaScript
const styleDefault = {
strokeColor: "green",
strokeWeight: 2.0,
strokeOpacity: 1.0,
fillColor: "green",
fillOpacity: 0.3,
};
const styleClicked = {
...styleDefault,
strokeColor: "blue",
fillColor: "blue",
fillOpacity: 0.5,
};
const styleMouseMove = {
...styleDefault,
strokeWeight: 4.0,
};
function applyStyle(/* FeatureStyleFunctionOptions */ params) {
const datasetFeature = params.feature;
// Note, 'globalid' is an attribute in this dataset.
//@ts-ignore
if (
lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"])
) {
return styleClicked;
}
//@ts-ignore
if (
lastInteractedFeatureIds.includes(
datasetFeature.datasetAttributes["globalid"],
)
) {
return styleMouseMove;
}
return styleDefault;
}
स्टाइल फ़ंक्शन को सुविधाओं पर लागू करने पर, हमेशा एक जैसे नतीजे मिलने चाहिए. उदाहरण के लिए, अगर आपको सुविधाओं के किसी सेट को रैंडम तौर पर रंग देना है, तो रैंडम हिस्सा सुविधा के स्टाइल फ़ंक्शन में नहीं होना चाहिए. ऐसा करने पर, आपको अनचाहे नतीजे मिल सकते हैं. यह फ़ंक्शन किसी लेयर में मौजूद हर सुविधा पर काम करता है. इसलिए, ऑप्टिमाइज़ेशन ज़रूरी है. रेंडर होने में लगने वाले समय पर असर न पड़े, इसके लिए किसी लेयर का इस्तेमाल न होने पर, स्टाइल को null पर सेट करें.
पॉइंट डेटा को स्टाइल करने का उदाहरण
इस उदाहरण में, पॉइंट ज्यामिति पर आधारित डेटा सुविधाओं को स्टाइल करने का तरीका दिखाया गया है.
डेटासेट के बारे में जानकारी
इस उदाहरण में इस्तेमाल किया गया डेटासेट, न्यूयॉर्क सिटी के सेंट्रल पार्क में 2018 में गिलहरी के सर्वे का नतीजा है.
CSV डेटा फ़ाइल के इस हिस्से में, हम देखते हैं कि कॉलम x और y का इस्तेमाल भूगोल के लिए किया जाता है; एक LatLng कॉलम शामिल किया गया है, लेकिन इसका इस्तेमाल इस उदाहरण में नहीं किया गया है. इसकी वजह यह है कि भौगोलिक स्थिति को दो कॉलम से दिखाया जाना चाहिए. squirrel census डेटासेट में, गिलहरी के फ़र के रंग और व्यवहार से जुड़े अलग-अलग डेटा पॉइंट की एक अच्छी वैरायटी होती है. इसे देखने के लिए, ज़रूर हॉरिज़ॉन्टल तौर पर स्क्रोल करें.
| X | Y | UniqueSquirrelID | Hectare | Shift | तारीख | Hectare SquirrelNumber | आयु | PrimaryFurColor | HighlightFurColor | CombinationofPrimaryandHighlightColor | Colornotes | जगह | AboveGroundSighter मेज़रमेंट | SpecificLocation | दौड़ना | चेज़िंग | क्लाइंबिंग | खाना | Foraging | अन्य गतिविधियां | Kuks | Quaas | विलाप | Tailflags | पूंछ हिलाना | तरीके | उदासीन | Runsfrom | OtherInteractions | LatLng |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| -73.9561344937861 | 40.7940823884086 | 37F-PM-1014-03 | 37 फ़ैरनहाइट | PM | 10142018 | 3 | + | गलत | गलत | गलत | गलत | गलत | गलत | गलत | गलत | गलत | गलत | गलत | गलत | गलत | POINT (-73.9561344937861 40.7940823884086) | |||||||||
| -73.9688574691102 | 40.7837825208444 | 21B-AM-1019-04 | 21 अरब | AM | 10192018 | 4 | + | गलत | गलत | गलत | गलत | गलत | गलत | गलत | गलत | गलत | गलत | गलत | गलत | गलत | POINT (-73.9688574691102 40.7837825208444) | |||||||||
| -73.9742811484852 | 40.775533619083 | 11B-PM-1014-08 | 11B | PM | 10142018 | 8 | स्लेटी | स्लेटी+ | Above Ground | 10 | गलत | सही | गलत | गलत | गलत | गलत | गलत | गलत | गलत | गलत | गलत | गलत | गलत | POINT (-73.97428114848522 40.775533619083) | ||||||
| -73.9596413903948 | 40.7903128889029 | 32E-PM-1017-14 | 32E | PM | 10172018 | 14 | वयस्क | स्लेटी | स्लेटी+ | प्राइमरी के तौर पर कुछ भी नहीं चुना गया. हाइलाइट के तौर पर चुने गए आइटम स्लेटी रंग में दिखते हैं. एक्ज़ीक्यूटिव अडजस्टमेंट किए गए. | गलत | गलत | गलत | सही | सही | गलत | गलत | गलत | गलत | गलत | गलत | गलत | सही | POINT (-73.9596413903948 40.7903128889029) | ||||||
| -73.9702676472613 | 40.7762126854894 | 13E-AM-1017-05 | 13E | AM | 10172018 | 5 | वयस्क | स्लेटी | दालचीनी | स्लेटी+सिनामोन | Above Ground | पेड़ के स्टंप पर | गलत | गलत | गलत | गलत | सही | गलत | गलत | गलत | गलत | गलत | गलत | गलत | गलत | POINT (-73.9702676472613 40.7762126854894) | ||||
| -73.9683613516225 | 40.7725908847499 | 11H-AM-1010-03 | 11 घंटे | AM | 10102018 | 3 | वयस्क | दालचीनी | सफ़ेद | सिनेमन+व्हाइट | गलत | गलत | गलत | गलत | सही | गलत | गलत | गलत | गलत | सही | गलत | सही | गलत | POINT (-73.9683613516225 40.7725908847499) | ||||||
| -73.9541201789795 | 40.7931811701082 | 36H-AM-1010-02 | 36 घंटे | AM | 10102018 | 2 | वयस्क | स्लेटी | स्लेटी+ | हैक्टेयर के ठीक बाहर | ग्राउंड प्लेन | FALSE | गलत | गलत | गलत | गलत | सही | गलत | गलत | गलत | गलत | गलत | गलत | गलत | गलत | POINT (-73.9541201789795 40.7931811701082) |
स्टाइल पॉइंट के डेटा की सुविधाएं
इस उदाहरण में दिए गए कोड में, CombinationofPrimaryandHighlightColor एट्रिब्यूट के आधार पर हर पॉइंट के लिए, भरने के रंग और स्ट्रोक के रंग को स्टाइल करने का आसान तरीका अपनाया गया है. यह एट्रिब्यूट, हर गिलहरी के लिए फ़र के प्राइमरी और सेकंडरी रंग को जोड़ता है.
TypeScript
function setStyle(/* FeatureStyleFunctionOptions */ params) {
// Get the dataset feature, so we can work with all of its attributes.
const datasetFeature = params.feature;
// Get all of the needed dataset attributes.
const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];
// Apply styles. Fill is primary fur color, stroke is secondary fur color.
switch (furColors) {
case 'Black+':
return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
break;
case 'Cinnamon+':
return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
break;
case 'Cinnamon+Gray':
return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
break;
case 'Cinnamon+White':
return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
break;
case 'Gray+':
return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
break;
case 'Gray+Cinnamon':
return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
break;
case 'Gray+Cinnamon, White':
return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
break;
case 'Gray+White':
return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
break;
default: // Color not defined.
return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
break;
}
}
JavaScript
function setStyle(/* FeatureStyleFunctionOptions */ params) {
// Get the dataset feature, so we can work with all of its attributes.
const datasetFeature = params.feature;
// Get all of the needed dataset attributes.
const furColors =
datasetFeature.datasetAttributes["CombinationofPrimaryandHighlightColor"];
// Apply styles. Fill is primary fur color, stroke is secondary fur color.
switch (furColors) {
case "Black+":
return /* FeatureStyleOptions */ { fillColor: "black", pointRadius: 8 };
break;
case "Cinnamon+":
return /* FeatureStyleOptions */ { fillColor: "#8b0000", pointRadius: 8 };
break;
case "Cinnamon+Gray":
return /* FeatureStyleOptions */ {
fillColor: "#8b0000",
strokeColor: "gray",
pointRadius: 6,
};
break;
case "Cinnamon+White":
return /* FeatureStyleOptions */ {
fillColor: "#8b0000",
strokeColor: "white",
pointRadius: 6,
};
break;
case "Gray+":
return /* FeatureStyleOptions */ { fillColor: "gray", pointRadius: 8 };
break;
case "Gray+Cinnamon":
return /* FeatureStyleOptions */ {
fillColor: "gray",
strokeColor: "#8b0000",
pointRadius: 6,
};
break;
case "Gray+Cinnamon, White":
return /* FeatureStyleOptions */ {
fillColor: "silver",
strokeColor: "#8b0000",
pointRadius: 6,
};
break;
case "Gray+White":
return /* FeatureStyleOptions */ {
fillColor: "gray",
strokeColor: "white",
pointRadius: 6,
};
break;
default: // Color not defined.
return /* FeatureStyleOptions */ { fillColor: "yellow", pointRadius: 8 };
break;
}
}
पूरा कोड का उदाहरण
सोर्स कोड का पूरा उदाहरण देखें
TypeScript
let map;
function setStyle(/* FeatureStyleFunctionOptions */ params) {
// Get the dataset feature, so we can work with all of its attributes.
const datasetFeature = params.feature;
// Get all of the needed dataset attributes.
const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];
// Apply styles. Fill is primary fur color, stroke is secondary fur color.
switch (furColors) {
case 'Black+':
return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
break;
case 'Cinnamon+':
return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
break;
case 'Cinnamon+Gray':
return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
break;
case 'Cinnamon+White':
return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
break;
case 'Gray+':
return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
break;
case 'Gray+Cinnamon':
return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
break;
case 'Gray+Cinnamon, White':
return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
break;
case 'Gray+White':
return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
break;
default: // Color not defined.
return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
break;
}
}
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
const position = {lat: 40.780101, lng: -73.967780};
const map = new Map(document.getElementById('map') as HTMLElement, {
zoom: 17,
center: position,
mapId: 'b98e588c46685dd7',
mapTypeControl: false,
streetViewControl: false,
fullscreenControl: false,
});
// Add the data legend.
makeLegend(map);
// Dataset ID for squirrel dataset.
const datasetId = '02fa1552-37dd-4a95-844f-f99e1c22541f';
//@ts-ignore
const datasetLayer = map.getDatasetFeatureLayer(datasetId);
//@ts-ignore
datasetLayer.style = setStyle;
// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement('div');
const attributionControl = createAttribution(map);
attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(attributionDiv);
}
// Create a custom control to hold attribution text.
function createAttribution(map) {
const attributionLabel = document.createElement('div');
// Define CSS styles.
attributionLabel.style.backgroundColor = '#fff';
attributionLabel.style.opacity = '0.7';
attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif';
attributionLabel.style.fontSize = '10px';
attributionLabel.style.padding = '2px';
attributionLabel.style.margin = '2px';
attributionLabel.textContent = 'Data source: NYC Open Data';
return attributionLabel;
}
function makeLegend(map) {
let colors = {
'black': ['black'],
'cinnamon': ['#8b0000'],
'cinnamon + gray': ['#8b0000','gray'],
'cinnamon + white': ['#8b0000', 'white'],
'gray': ['gray'],
'gray + cinnamon': ['gray', '#8b0000'],
'gray + cinnamon + white': ['silver', '#8b0000'],
'gray + white': ['gray', 'white'],
'no color data': ['yellow'],
};
let legend = document.createElement('div');
legend.id = 'legend';
let title = document.createElement('div');
title.innerText = 'Fur Colors';
title.classList.add('title');
legend.appendChild(title);
let k;
for (k in colors) {
let wrapper = document.createElement('div');
wrapper.id = 'container';
let box = document.createElement('div');
box.style.backgroundColor = colors[k][0];
if (colors[k][1]) {
box.style.borderColor = colors[k][1];
} else {
box.style.borderColor = colors[k][0];
}
box.classList.add('box');
let txt = document.createElement('div');
txt.classList.add('legend');
txt.innerText = k;
wrapper.appendChild(box);
wrapper.appendChild(txt);
legend.appendChild(wrapper);
}
map.controls[google.maps.ControlPosition.LEFT_TOP].push(legend);
}
initMap();
JavaScript
let map;
function setStyle(/* FeatureStyleFunctionOptions */ params) {
// Get the dataset feature, so we can work with all of its attributes.
const datasetFeature = params.feature;
// Get all of the needed dataset attributes.
const furColors =
datasetFeature.datasetAttributes["CombinationofPrimaryandHighlightColor"];
// Apply styles. Fill is primary fur color, stroke is secondary fur color.
switch (furColors) {
case "Black+":
return /* FeatureStyleOptions */ { fillColor: "black", pointRadius: 8 };
break;
case "Cinnamon+":
return /* FeatureStyleOptions */ { fillColor: "#8b0000", pointRadius: 8 };
break;
case "Cinnamon+Gray":
return /* FeatureStyleOptions */ {
fillColor: "#8b0000",
strokeColor: "gray",
pointRadius: 6,
};
break;
case "Cinnamon+White":
return /* FeatureStyleOptions */ {
fillColor: "#8b0000",
strokeColor: "white",
pointRadius: 6,
};
break;
case "Gray+":
return /* FeatureStyleOptions */ { fillColor: "gray", pointRadius: 8 };
break;
case "Gray+Cinnamon":
return /* FeatureStyleOptions */ {
fillColor: "gray",
strokeColor: "#8b0000",
pointRadius: 6,
};
break;
case "Gray+Cinnamon, White":
return /* FeatureStyleOptions */ {
fillColor: "silver",
strokeColor: "#8b0000",
pointRadius: 6,
};
break;
case "Gray+White":
return /* FeatureStyleOptions */ {
fillColor: "gray",
strokeColor: "white",
pointRadius: 6,
};
break;
default: // Color not defined.
return /* FeatureStyleOptions */ { fillColor: "yellow", pointRadius: 8 };
break;
}
}
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps");
const position = { lat: 40.780101, lng: -73.96778 };
const map = new Map(document.getElementById("map"), {
zoom: 17,
center: position,
mapId: "b98e588c46685dd7",
mapTypeControl: false,
streetViewControl: false,
fullscreenControl: false,
});
// Add the data legend.
makeLegend(map);
// Dataset ID for squirrel dataset.
const datasetId = "02fa1552-37dd-4a95-844f-f99e1c22541f";
//@ts-ignore
const datasetLayer = map.getDatasetFeatureLayer(datasetId);
//@ts-ignore
datasetLayer.style = setStyle;
// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement("div");
const attributionControl = createAttribution(map);
attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(attributionDiv);
}
// Create a custom control to hold attribution text.
function createAttribution(map) {
const attributionLabel = document.createElement("div");
// Define CSS styles.
attributionLabel.style.backgroundColor = "#fff";
attributionLabel.style.opacity = "0.7";
attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif";
attributionLabel.style.fontSize = "10px";
attributionLabel.style.padding = "2px";
attributionLabel.style.margin = "2px";
attributionLabel.textContent = "Data source: NYC Open Data";
return attributionLabel;
}
function makeLegend(map) {
let colors = {
"black": ["black"],
"cinnamon": ["#8b0000"],
"cinnamon + gray": ["#8b0000", "gray"],
"cinnamon + white": ["#8b0000", "white"],
"gray": ["gray"],
"gray + cinnamon": ["gray", "#8b0000"],
"gray + cinnamon + white": ["silver", "#8b0000"],
"gray + white": ["gray", "white"],
"no color data": ["yellow"],
};
let legend = document.createElement("div");
legend.id = "legend";
let title = document.createElement("div");
title.innerText = "Fur Colors";
title.classList.add("title");
legend.appendChild(title);
let k;
for (k in colors) {
let wrapper = document.createElement("div");
wrapper.id = "container";
let box = document.createElement("div");
box.style.backgroundColor = colors[k][0];
if (colors[k][1]) {
box.style.borderColor = colors[k][1];
} else {
box.style.borderColor = colors[k][0];
}
box.classList.add("box");
let txt = document.createElement("div");
txt.classList.add("legend");
txt.innerText = k;
wrapper.appendChild(box);
wrapper.appendChild(txt);
legend.appendChild(wrapper);
}
map.controls[google.maps.ControlPosition.LEFT_TOP].push(legend);
}
initMap();
सीएसएस
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#legend,
#dataset,
#counter {
background-color: #e5e5e5;
width: 15em;
margin-top: 2em;
margin-left: 1em;
border-radius: 8px;
font-family: Roboto;
overflow: hidden;
}
#dataset select {
border-radius: 0;
padding: 0.1em;
border: 1px solid black;
width: auto;
margin: 0.5em 1em;
}
.title {
padding: 0.5em 1em;
font-weight: bold;
font-size: 1.5em;
margin-bottom: 0.5em;
background-color: rgb(66, 133, 244);
color: white;
width: 100%;
}
.button {
font-size: 1.2em;
margin: 1em;
background-color: rgb(66, 133, 244);
color: white;
padding: 0.5em;
border-radius: 8px;
}
#legend #container {
margin: 0.5em 1em;
display: flex;
}
#legend div .box {
display: flex;
width: 2em;
height: 2em;
border-radius: 50%;
border: 3px solid;
}
#legend div .legend {
display: flex;
padding: 0.5em;
}
एचटीएमएल
<html>
<head>
<title>Style a point data feature</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
</body>
</html>
सैंपल आज़माएं
पॉलीगॉन डेटा को स्टाइल करने का उदाहरण
इस उदाहरण में, पॉलीगॉन ज्यामिति पर आधारित डेटा फ़ीचर को स्टाइल करने का तरीका दिखाया गया है.
डेटासेट के बारे में जानकारी
इस उदाहरण में इस्तेमाल किए गए डेटासेट में, न्यूयॉर्क सिटी के पार्क दिखाए गए हैं. डेटासेट GeoJSON फ़ाइल का दिया गया यह हिस्सा, प्रतिनिधि सुविधा की एंट्री दिखाता है.
{
"type": "Feature",
"properties": {
"jurisdiction": "DPR",
"mapped": "False",
"zipcode": "11356",
"acres": "0.05",
"location": "College Pl., College Pt. Blvd., bet. 11 Ave. and 12 Ave.",
"nys_assembly": "27",
"councildistrict": "19",
"url": "http://www.nycgovparks.org/parks/Q042/",
"typecategory": "Triangle/Plaza",
"us_congress": "14",
"eapply": "Poppenhusen Park",
"parentid": "Q-07",
"gispropnum": "Q042",
"retired": "false",
"communityboard": "407",
"objectid": "6248",
"globalid": "F4810079-CBB9-4BE7-BBFA-B3C0C35D5DE5",
"name311": "Poppenhusen Park",
"department": "Q-07",
"pip_ratable": "true",
"subcategory": "Sitting Area/Triangle/Mall",
"precinct": "109",
"permit": "true",
"acquisitiondate": null,
"omppropid": "Q042",
"gisobjid": "100000301",
"signname": "Poppenhusen Park",
"address": null,
"permitparent": "Q-07",
"class": "PARK",
"nys_senate": "11",
"permitdistrict": "Q-07",
"borough": "Q",
"waterfront": "false"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
-73.84575702371716,
40.78796240884273
],
[
-73.84593393292693,
40.78796857347548
],
[
-73.84577256469657,
40.787651355629556
],
[
-73.84575702371716,
40.78796240884273
]
]
]
]
}
},
पॉलीगॉन डेटा की सुविधाओं को स्टाइल करना
इस उदाहरण में दिया गया कोड, "बिना विकसित" या "पार्कवे" के typecategory से जुड़ी डेटा फ़ीचर पर खास रंग लागू करता है. साथ ही, अन्य सभी फ़ीचर को हरा रंग देता है.
TypeScript
function setStyle(/* FeatureStyleFunctionOptions */ params) {
const datasetFeature = params.feature;
// 'typecategory' is an attribute in this Dataset.
const typeCategory = datasetFeature.datasetAttributes['typecategory'];
switch (typeCategory) {
case 'Undeveloped': // Color undeveloped areas blue.
return /* FeatureStyleOptions */ {
strokeColor: 'blue',
strokeWeight: 2,
strokeOpacity: 1,
fillColor: 'blue',
fillOpacity: 0.3,
};
break;
case 'Parkway': // Color historical house sites red.
return /* FeatureStyleOptions */ {
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1,
fillColor: 'red',
fillOpacity: 0.5,
};
break;
default: // Color other type categories green.
return /* FeatureStyleOptions */ {
strokeColor: 'green',
strokeWeight: 2,
strokeOpacity: 1,
fillColor: 'green',
fillOpacity: 0.3,
};
break;
}
}
JavaScript
function setStyle(/* FeatureStyleFunctionOptions */ params) {
const datasetFeature = params.feature;
// 'typecategory' is an attribute in this Dataset.
const typeCategory = datasetFeature.datasetAttributes["typecategory"];
switch (typeCategory) {
case "Undeveloped": // Color undeveloped areas blue.
return /* FeatureStyleOptions */ {
strokeColor: "blue",
strokeWeight: 2,
strokeOpacity: 1,
fillColor: "blue",
fillOpacity: 0.3,
};
break;
case "Parkway": // Color historical house sites red.
return /* FeatureStyleOptions */ {
strokeColor: "red",
strokeWeight: 2,
strokeOpacity: 1,
fillColor: "red",
fillOpacity: 0.5,
};
break;
default: // Color other type categories green.
return /* FeatureStyleOptions */ {
strokeColor: "green",
strokeWeight: 2,
strokeOpacity: 1,
fillColor: "green",
fillOpacity: 0.3,
};
break;
}
}
पूरा कोड का उदाहरण
सोर्स कोड का पूरा उदाहरण देखें
TypeScript
let map;
function setStyle(/* FeatureStyleFunctionOptions */ params) {
const datasetFeature = params.feature;
// 'typecategory' is an attribute in this Dataset.
const typeCategory = datasetFeature.datasetAttributes['typecategory'];
switch (typeCategory) {
case 'Undeveloped': // Color undeveloped areas blue.
return /* FeatureStyleOptions */ {
strokeColor: 'blue',
strokeWeight: 2,
strokeOpacity: 1,
fillColor: 'blue',
fillOpacity: 0.3,
};
break;
case 'Parkway': // Color historical house sites red.
return /* FeatureStyleOptions */ {
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1,
fillColor: 'red',
fillOpacity: 0.5,
};
break;
default: // Color other type categories green.
return /* FeatureStyleOptions */ {
strokeColor: 'green',
strokeWeight: 2,
strokeOpacity: 1,
fillColor: 'green',
fillOpacity: 0.3,
};
break;
}
}
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const position = {lat: 40.580732, lng: -74.152826};
const map = new Map(document.getElementById('map') as HTMLElement, {
zoom: 14,
center: position,
mapId: 'b98e588c46685dd7',
mapTypeControl: false,
});
// Dataset ID for NYC park data.
const datasetId = '6fe13aa9-b900-45e7-b636-3236672c3f4f';
//@ts-ignore
const datasetLayer = map.getDatasetFeatureLayer(datasetId);
datasetLayer.style = setStyle;
// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement('div');
const attributionControl = createAttribution(map);
attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
}
function createAttribution(map) {
const attributionLabel = document.createElement('div');
// Define CSS styles.
attributionLabel.style.backgroundColor = '#fff';
attributionLabel.style.opacity = '0.7';
attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif';
attributionLabel.style.fontSize = '10px';
attributionLabel.style.padding = '2px';
attributionLabel.style.margin = '2px';
attributionLabel.textContent = 'Data source: NYC Open Data';
return attributionLabel;
}
initMap();
JavaScript
let map;
function setStyle(/* FeatureStyleFunctionOptions */ params) {
const datasetFeature = params.feature;
// 'typecategory' is an attribute in this Dataset.
const typeCategory = datasetFeature.datasetAttributes["typecategory"];
switch (typeCategory) {
case "Undeveloped": // Color undeveloped areas blue.
return /* FeatureStyleOptions */ {
strokeColor: "blue",
strokeWeight: 2,
strokeOpacity: 1,
fillColor: "blue",
fillOpacity: 0.3,
};
break;
case "Parkway": // Color historical house sites red.
return /* FeatureStyleOptions */ {
strokeColor: "red",
strokeWeight: 2,
strokeOpacity: 1,
fillColor: "red",
fillOpacity: 0.5,
};
break;
default: // Color other type categories green.
return /* FeatureStyleOptions */ {
strokeColor: "green",
strokeWeight: 2,
strokeOpacity: 1,
fillColor: "green",
fillOpacity: 0.3,
};
break;
}
}
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps");
const position = { lat: 40.580732, lng: -74.152826 };
const map = new Map(document.getElementById("map"), {
zoom: 14,
center: position,
mapId: "b98e588c46685dd7",
mapTypeControl: false,
});
// Dataset ID for NYC park data.
const datasetId = "6fe13aa9-b900-45e7-b636-3236672c3f4f";
//@ts-ignore
const datasetLayer = map.getDatasetFeatureLayer(datasetId);
datasetLayer.style = setStyle;
// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement("div");
const attributionControl = createAttribution(map);
attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
}
function createAttribution(map) {
const attributionLabel = document.createElement("div");
// Define CSS styles.
attributionLabel.style.backgroundColor = "#fff";
attributionLabel.style.opacity = "0.7";
attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif";
attributionLabel.style.fontSize = "10px";
attributionLabel.style.padding = "2px";
attributionLabel.style.margin = "2px";
attributionLabel.textContent = "Data source: NYC Open Data";
return attributionLabel;
}
initMap();
सीएसएस
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
एचटीएमएल
<html>
<head>
<title>Style a polygon data feature with more detail</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
</body>
</html>
सैंपल आज़माएं
पॉलीलाइन डेटा को स्टाइल करने का उदाहरण
इस उदाहरण में, पॉलीलाइन ज्यामिति पर आधारित डेटा फ़ीचर को स्टाइल करने का तरीका दिखाया गया है.
डेटासेट के बारे में जानकारी
इस उदाहरण में इस्तेमाल किया गया डेटासेट, सिऐटल इलाके के पुल दिखाता है. डेटासेट की GeoJSON फ़ाइल के इस हिस्से में, किसी लैंडमार्क की जानकारी देने वाली एंट्री दिखाई गई है.
{
"type": "Feature",
"properties": {
"OBJECTID": 1,
"COMPTYPE": 66,
"COMPKEY": 515774,
"HANSEGKEY": 489781,
"UNITID": "BRG-935",
"UNITTYPE": " ",
"BRGUNITID": "BRG-935",
"UNITDESC_BRG": "YALE AVE BR REV LANE OC ",
"UNITDESC_SEG": "HOWELL ST ON RP BETWEEN HOWELL ST AND I5 SB ",
"INSTDATE": null,
"EXPDATE": null,
"STATUS": " ",
"STATUSDT": null,
"CONDITION": " ",
"CONDDT": null,
"OWN": " ",
"LSTVERIFY": null,
"MAINTBY": " ",
"ADDBY": "GARCIAA",
"ADDDTTM": "2010-01-21T00:00:00Z",
"MODBY": null,
"MODDTTM": null,
"BR_NBR": 935,
"BR_CODE": " 935",
"BR_TYPE": "ST",
"BR_NAME": "YALE AVE BR REV LANE OC",
"BR_FACILITIES": "YALE AVE-SR 5 ON RAMP",
"BR_FEATURES": "SR 5 REV LANE",
"BR_RATING": 0,
"BR_INSET": 1,
"BR_GEO": "DT",
"BR_OWNER": "DOT",
"BR_OWNER_NAME": "State of Washington",
"GEOBASID": 0,
"XGEOBASID": 0,
"GISSEGKEY": 489781,
"EARTHQUAKE_RESPONSE_TEAM": " ",
"SHAPE_Length": 220.11891836147655
},
"geometry": {
"type": "LineString",
"coordinates": [
[
-122.329201929090928,
47.616910448708538
],
[
-122.329206483407461,
47.616976719821004
],
[
-122.32921802149356,
47.617042137515213
],
[
-122.329236413912909,
47.617105967923777
],
[
-122.329261454336034,
47.617167494985758
],
[
-122.329292861855023,
47.617226028479571
],
[
-122.329330284134699,
47.617280911766009
],
[
-122.329373301365223,
47.617331529154569
],
[
-122.329421430971635,
47.617377312810319
],
[
-122.329474133027375,
47.617417749124023
],
[
-122.32953081631139,
47.617452384473893
]
]
}
},
पॉलीलाइन डेटा की सुविधाओं को स्टाइल दें
नीचे दिया गया स्निपेट, सभी डेटा फ़ीचर पर एक ही स्टाइल लागू करता है. किसी लॉजिक की ज़रूरत नहीं है, इसलिए इस मामले में फ़ीचर स्टाइल फ़ंक्शन का इस्तेमाल नहीं किया जाता.
TypeScript
// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, };
JavaScript
// Apply style to all features.
datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };
सोर्स कोड का पूरा उदाहरण देखें
TypeScript
let map;
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const position = {lat: 47.59, lng: -122.31};
const map = new Map(document.getElementById('map') as HTMLElement, {
zoom: 14,
center: position,
mapId: 'b98e588c46685dd7',
mapTypeControl: false,
});
// Dataset ID for Seattle Bridges
const datasetId = '3d0bd5fb-3f42-47fe-b50f-81c0932cd533';
//@ts-ignore
const datasetLayer = map.getDatasetFeatureLayer(datasetId);
// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4, };
// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement('div');
const attributionControl = createAttribution(map);
attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
}
// Create a custom control to hold attribution text.
function createAttribution(map) {
const attributionLabel = document.createElement('div');
// Define CSS styles.
attributionLabel.style.backgroundColor = '#fff';
attributionLabel.style.opacity = '0.7';
attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif';
attributionLabel.style.fontSize = '10px';
attributionLabel.style.padding = '2px';
attributionLabel.style.margin = '2px';
attributionLabel.textContent = 'Data source: Seattle GeoData';
return attributionLabel;
}
initMap();
JavaScript
let map;
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps");
const position = { lat: 47.59, lng: -122.31 };
const map = new Map(document.getElementById("map"), {
zoom: 14,
center: position,
mapId: "b98e588c46685dd7",
mapTypeControl: false,
});
// Dataset ID for Seattle Bridges
const datasetId = "3d0bd5fb-3f42-47fe-b50f-81c0932cd533";
//@ts-ignore
const datasetLayer = map.getDatasetFeatureLayer(datasetId);
// Apply style to all features.
datasetLayer.style = { strokeColor: "green", strokeWeight: 4 };
// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement("div");
const attributionControl = createAttribution(map);
attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
}
// Create a custom control to hold attribution text.
function createAttribution(map) {
const attributionLabel = document.createElement("div");
// Define CSS styles.
attributionLabel.style.backgroundColor = "#fff";
attributionLabel.style.opacity = "0.7";
attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif";
attributionLabel.style.fontSize = "10px";
attributionLabel.style.padding = "2px";
attributionLabel.style.margin = "2px";
attributionLabel.textContent = "Data source: Seattle GeoData";
return attributionLabel;
}
initMap();
सीएसएस
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
एचटीएमएल
<html>
<head>
<title>Style a polyline data feature</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
</body>
</html>