הוספת גאומטריות מאתר המארח למפה
פונקציה זו מאפשרת לייצר אינטראקציה בין האתר המארח למפה ולהציג על גביה אוסף ישויות לאותו מיקום, סימול ותוכן בועית (רצוי שהשליטה תהיה של הדף המארח). הפונקציה מקבלת כפרמטר אובייקט המכיל את כל הנתונים הדרושים להוספת הגאומטריות ומחזירה מערך של מספרים ה-ids של הגאומטריות שהוסיפו למפה.
govmap.displayGeometries(data);
הפונקציה מקבלת כפרמטר אובייקט המכיל את ה-properties הבאים
| ש ם פרמטר | סוג | תיאור |
|---|---|---|
| wkts | []string | מערך של מחרוזות המייצגות את הגאומטריות בפורמט WKT. |
| names | []string | מערך שמכיל את שמות הגאומטריות. |
| geometryType | enum govmap.geometryType | סוג הגאומטריה הרצויה. |
| defaultSymbol | object | סימבול בהתאם לסוג הציור, דוגמאות מפורטות מטה. |
| symbols | []object | במידה ורוצים להציג כל גאומטריה בסימבול שונה, יש לשלוח מערך של סימבולים בפורמט דומה ל-defaultSymbol. |
| clearExistings | boolean | משתנה בוליאני שמצביע אם למחוק את הגאומטריות הקיימות על המפה לפני הציור או לא. |
| data | object | מידע נוסף אם המשתמש רוצה שיוצג רֶמֶז צָץ (Tooltip) במעבר מעל הגאומטריות או בועית מידע בקליק על גאומטריה. קיימים בו ה-properties הבאים: |
| - tooltips (array): מערך של מחרוזות להצגה ברֶמֶז צָץ (Tooltip) במעבר מעל הגאומטריות. | ||
| - headers (array): מערך של כותרות הבועיות להצגה בבועית המידע. | ||
| - bubbleUrl (string): כתובת הבסיס לתוכן הבועית. | ||
- bubbles (array): מערך של פרמטרים לבועית מידע, כל איבר מהמערך ישורשר לכתובת הבסיס bubbleUrl. | ||
- bubbleHTML (string): מחרוזת HTML אשר תוצג בבועית. פעיל רק כאשר לא מועבר bubbleUrl. | ||
- bubbleHTMLParameters (array, דו-מימדי): מערך דו-מימדי של מחרוזות אשר מכיל את הפרמטרים שיוצגו בתוך ה-bubbleHTML לפי הסדר (למשל, הפרמטרים שבמערך הראשון יוצגו בבועית הראשונה). | ||
| - labels (array): זהו מערך של מחרוזות (strings) המייצג את הטקסט של כל אובייקט שיוצג על הגאומטריות, כאשר חובה לספק טקסט לכל אובייקט. | ||
| - fontLabel (array): מערך של אובייקטים המתארים את הגופנים שיוצגו על הגאומטריות. כל אובייקט כולל את המאפיינים הבאים: - font (string): שם הגופן (למשל, 'Arial'). - fontSize (number): גודל הגופן (למשל, 40). - fill (string): צבע הרקע (למשל, 'yellow'). - stroke (string): צבע הקו של ה-label (למשל, 'blue'). |
במערכים: tooltips, headers, bubbles יש להעביר מספר איברים כמספר הגאומטריות ובאותו סדר. כל איבר מה bubbles ישורשר ל bubblesUrl, בדוגמה זו ה bubblesUrl הוא https://www.0404.co.il/, ולכל בועית ישורשר הפרמטר המתאים לדוגמא: בבועית הראשונה יוצג דף החדשות ע"י שרשור: [bubblesUrl + bubbles[0 זהו הקישור שיוצג בבועית : https://www.0404.co.il/categories/1
חובה לספק מספר ערכים במערך labels התואם למספר האובייקטים. הגדרת הגופן תחול על כולם באופן אחיד עבור כל היישויות. במידה ולא צוין גופן, יתווסף גופן ברירת מחדל באופן הבא:
font: 'Arial',
size: 12,
fill: '#000000',
stroke: '#FFFFFF',
פרמטר חוזר
| שם פרמטר | סוג | תיאור |
|---|---|---|
| data | []number | רשימת id של הגאומטריות שנוצרו |
הוספת 3 נקודות על המפה
אובייקט symbol עבור נקודה:
| שם פרמטר | סוג | תיאור |
|---|---|---|
| url | string | url של התמונה |
| width | number | רוחב התמונה |
| height | number | אורך התמונה |
קוד לדוגמה: הוספה של 3 נקודות, בלחיצה על נקודה תיפתח בועית עם קישור לדף באתר חדשות 0404 (שימוש ב bubblesUrl).
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://www.govmap.gov.il/govmap/api/govmap.api.js" defer></script>
<script type="text/javascript">
function initGovMap() {
govmap.createMap('map', {
token: 'YOUR_API_TOKEN',
layers: ["GASSTATIONS","PARCEL_HOKS", "KSHTANN_ASSETS", "bus_stops", "PARCEL_ALL"],
showXY: true,
identifyOnClick: true,
isEmbeddedToggle: false,
background: 3,
layersMode: 1,
zoomButtons:false
});
}
function showExample() {
// Create data object
var data = {
wkts: ['POINT(179714.32 663772.17)', "POINT(179621.05 663704.57)", "POINT(179376.26 663907.7)"],
names: ['p1','p2','p3'],
geometryType: govmap.geometryType.POINT,
defaultSymbol:
{
url:'http://www.creatingonline.com/webmaster/free_bullets/greenbullet1.gif',
width:15,
height:15
},
symbols: [
{url:'http://www.creatingonline.com/webmaster/free_bullets/goldbullet1.gif', width:15, height:15},
{url:'http://www.creatingonline.com/webmaster/free_bullets/blackbullet1.gif', width:15, height:15},
{url: 'http://www.creatingonline.com/webmaster/free_bullets/greenbullet1.gif', width: 15, height: 15 }
],
clearExisting: true,
data: {
tooltips: ['0404 חדשות','0404 כלכלה','0404 בארץ'],
headers: ['חדשות','כלכלה','בארץ'],
bubbles: [
'categories/1',
'categories/78',
'categories/132'
],
bubbleUrl: 'https://www.0404.co.il/'
}
};
govmap.displayGeometries(data).then(function (response) {
console.log(response.data);
});
}
</script>
</head>
<body>
<div id="map" style="width:600px;height:600px;"></div>
<button onClick="showExample()">Show Example</button>
</body>
</html>
תשובה (רשימת id’s ):
data: [0, 1, 2]
הוספת עיגול על המפה
במקרה זה במקום הפרמטר wkts הפונקציה מקבלת פרמטר circleGeometries מסוג מערך של אובייקטים. כל אובייקט במערך יכיל את המאפיינים של עיגול (קואורדינטות x, y של מרכז העיגול ו- radius). אובייקט symbol עבור עיגול:
| שם פרמטר | סוג | תיאור |
|---|---|---|
| outlineColor | []number | צבע קו הגבול |
| outlineWidth | number | עובי קו הגבול |
| fillColor | []number | צבע מילוי |
קוד לדוגמה:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://www.govmap.gov.il/govmap/api/govmap.api.js" defer onload="initGovMap()"></script>
<script type="text/javascript">
function initGovMap() {
govmap.createMap('map', {
token: 'YOUR_API_TOKEN',
layers: ["GASSTATIONS","PARCEL_HOKS", "KSHTANN_ASSETS", "bus_stops", "PARCEL_ALL"],
showXY: true,
identifyOnClick: true,
isEmbeddedToggle: false,
background: 3,
layersMode: 1,
zoomButtons:false
});
}
function showExample() {
var data = {
circleGeometries : [{ x: 179290, y: 664338, radius:500 }],
names: ['p1'],
geometryType: govmap.geometryType.CIRCLE,
defaultSymbol:
{
outlineColor: [0, 0, 255, 1],
outlineWidth: 1,
fillColor: [0, 255, 0, 0.5]
},
symbols: [],
clearExisting: true,
data: {
tooltips: ['סודות מאכל הפלאפל הלאומי'],
headers: ['פלאפל'],
bubbles: [''],
bubbleUrl: 'https://he.wikipedia.org/wiki/%D7%A4%D7%9C%D7%90%D7%A4%D7%9C'
}
};
govmap.displayGeometries(data).then(function (response) {
console.log(response.data);
});
}
</script>
</head>
<body>
<div id="map" style="width:600px;height:600px;"></div>
<button onClick="showExample()">Show Example</button>
</body>
</html>
הוספת מצולע על גבי המפה
אובייקט symbol עבור מצולע:
| שם פרמטר | סוג | תיאור |
|---|---|---|
| outlineColor | []number | צבע קו הגבול |
| outlineWidth | number | עובי קו הגבול |
| fillColor | []number | צבע מילוי |
קוד לדוגמה: בלחיצה על מצולע תיפתח בועית עם html שהוגדר (שימוש בbubblesHtml)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://www.govmap.gov.il/govmap/api/govmap.api.js" defer onload="initGovMap()"></script>
<script type="text/javascript">
function initGovMap() {
govmap.createMap('map', {
token: 'YOUR_API_TOKEN',
layers: ["GASSTATIONS","PARCEL_HOKS", "KSHTANN_ASSETS", "bus_stops", "PARCEL_ALL"],
showXY: true,
identifyOnClick: true,
isEmbeddedToggle: false,
background: 3,
layersMode: 1,
zoomButtons:false
});
}
function showExample(){
var bubbleContent = "<div style='border: 1px solid #525252; margin: 10px;padding: 10px;'><div style='background-color: yellow;'>{0}</div><div style='background-color: blue;'>{1}</div></div>";
var data = {
wkts: ["POLYGON((151612.40 534674.88, 215112.52 538643.64, 98431.04 445774.70, 74618.49 521974.85, 80968.50 552931.17, 151612.40 533881.13,151612.40 534674.88))",
"POLYGON((196062.48 621458.39, 196591.65 622516.72, 197649.99 659293.88, 229929.22 665379.31, 243423.00 632306.33, 196062.48 621458.39))"],
names: ['p1', 'p2'],
geometryType: govmap.geometryType.POLYGON,
defaultSymbol:
{
outlineColor: [0, 80, 255, 1],
outlineWidth: 1,
fillColor: [138, 43, 226, 0.5]
},
symbols: [],
clearExisting: true,
data: {
tooltips: ['רֶמֶז צָץ מצולע 1', 'רֶמֶז צָץ מצולע 2'],
headers: ['מצולע 1 כותרת','מצולע 2 כותרת'],
bubbleHTML: bubbleContent,
bubbleHTMLParameters: [['מצולע 1','מידע נוסף...'], ['מצולע 2', 'מידע נוסף...']],
labels: ['label1', 'label2'],
fontLabel: {
font: 'Arial',
fontSize: 40,
fill: 'yellow',
stroke: 'blue',
},
}
};
govmap.displayGeometries(data).then(function (response) {
console.log(response.data);
});
}
</script>
</head>
<body>
<div id="map" style="width:600px;height:600px;"></div>
<button onClick="showExample()">Show Example</button>
</body>
</html>
הוספת קו על גבי המפה
אובייקט symbol עבור קו:
| שם פרמטר | סוג | תיאור |
|---|---|---|
| color | []number | צבע הקו |
| width | number | עובי הקו |
קוד לדוגמה:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://www.govmap.gov.il/govmap/api/govmap.api.js" defer onload="initGovMap()"></script>
<script type="text/javascript">
function initGovMap() {
govmap.createMap('map', {
token: 'YOUR_API_TOKEN',
layers: ["GASSTATIONS","PARCEL_HOKS", "KSHTANN_ASSETS", "bus_stops", "PARCEL_ALL"],
showXY: true,
identifyOnClick: true,
isEmbeddedToggle: false,
background: 3,
layersMode: 1,
zoomButtons:false
});
}
function showExample(){
var data = {
wkts: ['LINESTRING(217457.62 749119.89, 158039.27 583337.66, 239075.64 633825.69)'],
names: ['p1'],
geometryType: govmap.geometryType.POLYLINE,
defaultSymbol:
{
color: [255, 0, 80, 1],
width: 10,
},
symbols: [],
clearExisting: true,
data: {
tooltips: ['שווארמה המאכל הלאומי'],
headers: ['שווארמה'],
bubbles: ['%D7%A9%D7%95%D7%95%D7%90%D7%A8%D7%9E%D7%94'],
bubbleUrl: 'https://he.wikipedia.org/wiki/'
}
};
govmap.displayGeometries(data).then(function (response) {
console.log(response.data);
});
}
</script>
</head>
<body>
<div id="map" style="width:600px;height:600px;"></div>
<button onClick="showExample()">Show Example</button>
</body>
</html>