Caspio Map Mashup v7 Developer Reference

Transcription

1 1. DataPage Setup Caspio Map Mashup v7 Developer Reference Configure your DataPage and map settings using the DataPage Wizard in Caspio Bridge Enable Parameters On the first screen of the DataPage wizard, check Enable Advanced Options and Enable Parameters Define Your Fields on the Results Page Insert an HTML Block at the bottom of your DataPage elements in the "Configure Results Page Fields" section of the DataPage wizard. Make sure no fields from your table appear below the HTML Block. Then copy and paste the following code into the HTML Block: <span <!-- Begin of Map Fields Section --> <div <div <div <div <!-- End of Map Fields Section --> <!-- Begin of Icon Conditions Section --> <!-- End of Icon Conditions Section --> <script type="text/javascript">try{ mapenvironment.adddpitemmapsettings( ); }catch(e){}</script> In the code, replace the field parameters in red with the corresponding field names from your table: Address Fields: Replace with the field names in your table for address, city, state, and zip. If your table contains a complete address in a single field, use only [@field:address] and remove [@field:city], [@field:state] [@field:zip] from the code. Description Field: If you have a field in your table that contains descriptive information for each record, replace [@field:description] with the name of the field. This text will appear in the bubble that pops up over the selected point on the map. If no description is selected, the default will be the entire address. Latitude and Longitude Fields: If your table is geocoded, replace [@field:latitude] and [@field:longitude] with the field names in your table. If your table is not geocoded, you can remove these two lines from the code: <div id="latitude:[@field:pk_id]:[@cbappkey]" style="display:none">[@field:latitude]</div> <div id="longitude:[@field:pk_id]:[@cbappkey]" style="display:none">[@field:longitude]</div> In this case geocoding operation will be performed for each record. Geocoding also will be performed if you table has coordinates fields, but they are 2012 Caspio, Inc. All Rights Reserved. Page 1 Caspio Map Mashup v7 Developer Reference 2

2 1.3. Display Map on Details Page (Optional) To display the map on the Details Page of each record: Insert an HTML Block at the bottom of your DataPage elements in the "Configure Details Page Fields" section of the DataPage wizard. Then copy and paste the following code into the HTML Block: <!-- Begin of Map Fields Section --> <div <div <div <div <!-- End of Map Fields Section --> <!-- Begin of Icon Conditions Section --> <!-- End of Icon Conditions Section --> <script type="text/javascript">try{ mapenvironment. SetDetailsMapSettings( ); }catch(e){}</script> Replace the field parameters in red with the corresponding field names from your table, as explained in Section Hide Map on Details Page If you don t want the map to be displayed on the Details page, insert Header/Footer in the "Configure Details Page Fields" screen in the DataPage wizard. Then copy and paste the following code into the Header: <script 2012 Caspio, Inc. All Rights Reserved. Page 2 Caspio Map Mashup v7 Developer Reference 2

3 2. Map Configuration File Instead of inserting the same configuration file on every page, you can create a Map Mashup configuration file and deploy it on your server Create a configuration file using the following code below and save as custom_map.js. The location of this file will be referenced in Deploy the Map as URLToYourMapConfigurationFile. /* Begin of Map Settings Section */ var mapsettings = { "maptype": "Y", "mapview": "R", "mapwidth": "800", "mapheight": "400", "mapcssstyle": "", "useautozoom": "Y", "zoomlevelresult": "10", "zoomleveldetails": "6", "zoomlevelmapit": "13", "bubbleopentype": "2", "disablescrollwheel": "N", "showtrafficlayer": "N", "plotmarkers": "Y", "homeposition": "Mountain View, CA, USA", "apikey": "" }; /* End of Map Settings Section */ Map Settings Legend Parameter Description Allowed values maptype mapview Defines which map API to use. Only Google maps are supported in this version. Defines the default map view (Road, Satellite, Hybrid, Terrain). G or GOOGLE mapwidth Map Container s width in pixels Integer > 0 mapheight Map Container s height in pixels Integer > 0 mapcssstyle useautozoom Map Container s CSS style. Use it if you want to set specific style for container. Defines whether the map should automatically Y or N adjust zoom level to location zoomlevelresult Zoom level for Results Page 1 16 zoomleveldetails Zoom level for Details Page 1 16 zoomlevelmapit Zoom level for Map It functionality 1 16 bubbleopentype Defines the event that will open InfoWindow with description on marker disablescrollwheel Shows whether map zooming should react on Y or N mouse wheel showtrafficlayer Shows whether traffic and accidents will be shown Y or N 'R', 'ROAD', 'ROADMAP' for single road map 'S', 'SAT', 'SATELLITE' for satellite map 'H', 'HYB', 'HYBRID' for hybrid (road + satellite) map 'T', 'TERR', 'TERRAIN' for terrain map The URL for the Cascading Style Sheet 0 for no InfoWindow 1 for mouseover 2 for mouse 2012 Caspio, Inc. All Rights Reserved. Page 3 Caspio Map Mashup v7 Developer Reference 2

4 plotmarkers homeposition apikey on map Shows whether markers should be plotted right after DP is loaded. Not applicable to Details & Direct To Details pages. The default map position Paste your Google Maps API Key (optional) Y or N 2.2. Copy and paste the following code at the end of your custom_map.js configuration file. This section defines the plotting and icon settings. /*** DATAPAGE SETTINGS ***/ var dpsettings = new mapdatapagesettings('your_dp_appkey'); /* Begin of DataPage Settings Section */ dpsettings.defaulticon = ""; dpsettings.defaulticonwidth = ""; dpsettings.defaulticonheight = ""; dpsettings.mapitenabled = "Y"; dpsettings.mapitlabel = "Map it"; dpsettings.filterneed = "Y"; dpsettings.filterrowsize = "5"; /* End of DataPage Settings Section */ /* Begin of DataPage Icon Condition Section */ /* End of DataPage Icon Condition Section */ mapenvironment.adddatapagemapsettings(dpsettings); /*** End of DATAPAGE SETTINGS ***/ Configuration File Setting: Parameter Description Allowed values DefaultIcon Defines the default marker icon 1 10 or custom URL DefaultIconWidth Defines the default marker icon width in pixels Integer > 0 DefaultIconHeight Defines the default marker icon width in pixels Integer > 0 MapItEnabled Defines if Map It functionality is enabled Y or N MapItLabel Map It link label Any custom text FilterNeed Defines whether filtering should be applied to markers (only if Y or N you have icon criteria configured, see Customizations section) FilterRowSize Defines the number of filter items in a row Integer. Default is Replace the red text YOUR_DP_APPKEY by AppKey of your DataPage. In order to get the DataPage AppKey select the corresponding DataPage inside your Caspio Bridge account and click the Properties button. 2.4 Save changes in the configuration file Save the changes in your configuration file (custom_map.js) and upload it to your web server. You will need the URL to set up the Web 2012 Caspio, Inc. All Rights Reserved. Page 4 Caspio Map Mashup v7 Developer Reference 2

5 3. Web Page Setup You will need access to your web page source to deploy the DataPage and map Deploy the DataPage To deploy your DataPage, select the DataPage and click the Deploy button. Copy the deploy code to your clipboard and click the "Deploy" button. Paste the deploy code on your web page where you want it to appear Deploy the Map To deploy the Map, use the URLToYourMapConfigurationFile or MapConfigurationSettings as described in Section Using URLToYourMapConfigurationFile Paste the deploy code to the end of <head> section of your webpage: <script type="text/javascript" src="//d23b32zmhbr2ct.cloudfront.net/mashup/script/caspio_mashups_v7.js"></script> <script type="text/javascript" src="urltoyourmapconfigurationfile"></script> Replace URLToYourMapConfigurationFile by URL to your map configuration file Using MapConfigurationSettings Paste the deploy code to the end of <head> section of your webpage: <script type="text/javascript" src="//d23b32zmhbr2ct.cloudfront.net/mashup/script/caspio_mashups_v7.js"></script> <script type="text/javascript">mapconfigurationsettings</script> Replace MapConfigurationSettings with the content of map configuration file To initially display a map without markers, paste the following code before all DataPages: <script type="text/javascript">mapenvironment.preloademptymap();</script> NOTE: Hide map on Search (Section 4.4) and Hide map on Details (Section 1.4) will not work if you add this code to your 2012 Caspio, Inc. All Rights Reserved. Page 5 Caspio Map Mashup v7 Developer Reference 2

6 4. Customizations (Optional) 4.1. Ability to plot different data with different pins 1. You will need to add additional section in the corresponding DataPage HTML block (which must be already present on DataPage (see Section and Section 1.3.1). Edit your DataPage and go to the "Configure Results Page Fields" wizard screen, select the HTML block with the Map Mashup settings and add the following code between the «Begin of Icon Conditions Section» and «End of Icon Conditions Section» comment lines: <!-- Begin of Icon Conditions Section --> <div <!-- End of Icon Conditions Section --> 2. Replace CheckConditionField with the field name which its value will determine what icon should be plotted on map. 3. Repeat this for every field you want to use as conditions 4. If you have Display Map on Details Page (see Section 1.3) you must repeat the steps for HTML Block at Configure Details Page Fields screen. 5. You also need to update your map configuration file. Open the map configuration file deployed on your server (see Section 2) (or map configuration code see Section 3 ) and add the following code: /* Begin of DataPage Icon Condition Section */ /* Condition begin */ var iconcond = new mapiconcondition(); iconcond.name = "Name" iconcond. Operators = [ { Action: "CompareOperator", FieldToCompare: "CompareField", ValueToCompare: "CompareValue", ComparisonStyle: "ComparisonStyle" } ]; iconcond.mapicon = "ResultMapIcon"; iconcond.mapiconwidth = "Width"; iconcond.mapiconheight = "Height"; iconcond.visible = "Visible"; dpsettings.addcondition( iconcond ); /* Condition end */ /* End of DataPage Icon Condition Section */ 6. You can add as many items to Operators array, as you need, using JSON format. 7. Replace all red marked text in code above by following values: Name a unique name for your 2012 Caspio, Inc. All Rights Reserved. Page 6 Caspio Map Mashup v7 Developer Reference 2

7 CompareOperator replace by one of following allowed numeric values (1-9): Value Operation meaning Is second operand needed 1 Equal Yes 2 NotEqual Yes 3 GreaterThan Yes 4 GreaterThanOrEqual Yes 5 LessThan Yes 6 LessThanOrEqual Yes 7 Contains Yes 8 IsBlank No 9 IsNotBlank No By default the CompareOperator will be «1» (Equal) if it is left blank. CompareField name of your criteria field CompareValue comparison value For example if you want to mark all records with CheckConditionField greater than or equal to «100», you must replace CompareOperator with value «4» (GreaterThanOrEqual) and replace CompareValue with value «100». In case of IsBlank or IsNotBlank («8» and «9») comparison operators the CompareValue can be empty string since it will be anyway ignored. ComparisonStyle type of comparison operation from following list (you can use either numeric or mnemonic values): Numeric comparison type name Mnemonic comparison type name Description 1 STRING Compare as strings TEXT(255), TEXT(64000), FILE or YES/NO with particular localized value like 'Yes' or 'No' 2 NUMERIC Compare as numbers NUMBER, AUTONUMBER or TEXT with correct(!) numeric data 3 DATE/TIME Compare as dates DATE/TIME or TEXT with correct(!) format of date ResultMapIcon either numeric Caspio icon number (1-10) or URL for your custom pin icon in GIF or PNG format. If this value is set to empty string (""), then the default Caspio icon will be 2012 Caspio, Inc. All Rights Reserved. Page 7 Caspio Map Mashup v7 Developer Reference 2

8 Width if the ResultMapIcon is custom image with not standard size, here you can place width of this image in pixels. If this value is set to empty string (""), then the default width will be used. Height - if the ResultMapIcon is custom image with not standard size, here you can place height of this image in pixels. If this value is set to empty string (""), the default width will be used. Visible set this value to Y if you want values that matched the criteria to be visible by default. Set to N to hide them by default. 8. Repeat the code section between «Condition begin» and «Condition end» comment lines for each icon condition which you want use in icon plotting functionality. Replace all red marked text for each new condition in the same way as described above. EXAMPLE: If you want plot on map records with following conditions: records with some example numeric field «Price» less than or equal to 100 by Caspio icon «1» records with some example numeric field «Price» greater than 100 but less than 500 by Caspio icon «2» records with some example numeric field «Price» greater than or equal to 500 by custom icon « with size 20x30 You must have the following code in the DataPage Icon Condition Section of map configuration file (this is just an example): /* Begin of DataPage Icon Condition Section */ /* Condition begin */ var iconcond1 = new mapiconcondition(); iconcond1.name = "Less Than Or Equal 100"; iconcond1. Operators = [ { Action: "6", FieldToCompare: "Price", ValueToCompare: "100", ComparisonStyle: "2" } ]; iconcond1.mapicon = "1"; iconcond1.mapiconwidth = ""; iconcond1.mapiconheight = ""; iconcond1.visible = "Y"; dpsettings.addcondition( iconcond1 ); /* Condition end */ /* Condition begin */ var iconcond2 = new mapiconcondition(); iconcond2.name = "Between 100 and 500"; iconcond2. Operators = [ { Action: "3", FieldToCompare: "Price", ValueToCompare: "100", ComparisonStyle: "2" }, { Action: "5", FieldToCompare: "Price", ValueToCompare: 2012 Caspio, Inc. All Rights Reserved. Page 8 Caspio Map Mashup v7 Developer Reference 2

9 ComparisonStyle: "2" } ]; iconcond2.mapicon = "2"; iconcond2.mapiconwidth = ""; iconcond2.mapiconheight = ""; iconcond2.visible = "Y"; dpsettings.addcondition( iconcond2 ); /* Condition end */ /* Condition begin */ var iconcond3 = new mapiconcondition(); iconcond3.name = "Greater than 500"; iconcond3. Operators = [ { Action: "4", FieldToCompare: "Price", ValueToCompare: "500", ComparisonStyle: "2" } ]; iconcond3.mapicon = " iconcond3.mapiconwidth = "20"; iconcond3.mapiconheight = "30"; iconcond3.visible = "Y"; dpsettings.addcondition( iconcond3 ); /* Condition end */ /* End of DataPage Icon Condition Section */ 4.2. Show/Hide plotted markers on map If you need to show/hide markers of particular DataPage regarding to state of particular checkbox control you must make following: 1. Setup the first DataPage for Map Mashup using as it is described above. 2. If you want to draw show/hide checkboxes above or below each DataPage on screen, then go to the Configure Result Page Fields screen, create Header/Footer and add to Header or Footer of DataPage the following code: <div><input type="checkbox" checked="checked" onkeyup="mapenvironment.togglemarkersvisible(this.checked, '[@cbappkey]');" onclick="mapenvironment.togglemarkersvisible(this.checked, '[@cbappkey]');" /> Show Markers</div> 3. Replace the Show Markers text by text which will appear next to show/hide DataPage markers checkbox. 4. Repeat steps 1-3 above for all other DataPages which will be deployed on one page and must have Show/Hide functionality. For each DataPage you can set its own text near the show/hide markers checkbox. 5. Deploy DataPages Map Positioning The default map displays right justified above your DataPage. If you would like to change the location, use the <div> tag as shown below: <div 2012 Caspio, Inc. All Rights Reserved. Page 9 Caspio Map Mashup v7 Developer Reference 2

10 4.4. Ability to disable map loading on Search Form. To disable Map (and save load time & internet traffic) on Search Form follow these steps: 1. Add Header/Footer to the Search form on Configure Search Fields in Datapage Wizard 2. Paste this code to the Header: <script type="text/javascript">mapsettings.hideonsearch='y';</script> Note, that if you configured empty map to be preloaded before datapage, it will be preloaded before Search Form Using MarkerClusterer MarkerClusterer is a tool that simplifies your data visualization by consolidating nearby data on a map in an aggregate form. Click here to see an example. Add the following code before map deployment script (which is described in Section 3.2): <script type="text/javascript" src="//google-maps-utility-libraryv3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script> Use the code below for MarkerClusterer capabilities: Using URLToYourMapConfigurationFile <script type="text/javascript" src="//google-maps-utility-libraryv3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script> <script type="text/javascript" src="//d23b32zmhbr2ct.cloudfront.net/mashup/script/caspio_mashups_v7.js"></script> <script type="text/javascript" src="urltoyourmapconfigurationfile"></script> Using MapConfigurationSettings <script type="text/javascript" src="//google-maps-utility-libraryv3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_ compiled.js"></script> <script type="text/javascript" src="//d23b32zmhbr2ct.cloudfront.net/mashup/script/caspio_mashups_v7.js"></script> <script type="text/javascript"> MapConfigurationSettings 2012 Caspio, Inc. All Rights Reserved. Page 10 Caspio Map Mashup v7 Developer Reference 2