הוספת גאומטריות מאתר המארח למפה

פונקציה זו מאפשרת לייצר אינטראקציה בין האתר המארח למפה ולהציג על גביה אוסף ישויות לאותו מיקום, סימול ותוכן בועית (רצוי שהשליטה תהיה של הדף המארח). הפונקציה מקבלת כפרמטר אובייקט המכיל את כל הנתונים הדרושים להוספת הגאומטריות ומחזירה מערך של מספרים ה-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>

הפונקציה מקבלת כפרמטר אובייקט המכיל את ה-properties הבאים​

פרמטר חוזר​

הוספת 3 נקודות על המפה​

תשובה (רשימת id’s ):​

הוספת עיגול על המפה​

קוד לדוגמה:​

הוספת מצולע על גבי המפה​

קוד לדוגמה: בלחיצה על מצולע תיפתח בועית עם html שהוגדר (שימוש בbubblesHtml)​

הוספת קו על גבי המפה​

קוד לדוגמה:​

הפונקציה מקבלת כפרמטר אובייקט המכיל את ה-properties הבאים

פרמטר חוזר

הוספת 3 נקודות על המפה

תשובה (רשימת id’s ):

הוספת עיגול על המפה

קוד לדוגמה:

הוספת מצולע על גבי המפה

קוד לדוגמה: בלחיצה על מצולע תיפתח בועית עם html שהוגדר (שימוש בbubblesHtml)

הוספת קו על גבי המפה

קוד לדוגמה: