PC SOFT

PROFESSIONAL NEWSGROUPS
WINDEVWEBDEV and WINDEV Mobile

Home → WEBDEV 2024 → Using Javascript APIs in Webdev
Using Javascript APIs in Webdev
Started by Gautam, Aug., 13 2013 3:04 PM - 2 replies
Registered member
67 messages
Posted on August, 13 2013 - 3:04 PM
Hello All

I am trying to use a mapping Javascript API in a webdev application. The API is provided by a company called leaflet. Website: http://www.leafletjs.com

The API quick start guide has the following steps (in Javascript) for integrating leaflet into a webpage:

Step 1. Include Leaflet CSS files in the head section of your document:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />

I have added this line into the HTML code section (Advanced Tab - under description) of the webdev page.

Step 2.
Include Leaflet JavaScript file:

<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

I have added this using "Add a web resource" option in the Advanced tab of the webdev page.


Step 3.
Put a div element with a certain id where you want your map to be:

<div id="map"></div>

Not sure how to handle this statement


Step 4.
Make sure the map container has a defined height, for example by setting it in CSS:

#map { height: 180px; }

Not sure how to handle this statement


Step 5.
Initialize the map and set its view to our chosen geographical coordinates and a zoom level:

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('

', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
maxZoom: 18
}).addTo(map);

Not sure how handle the above code in webdev.
I have created a Javascript local browser procedure and added this in the procedure. How do I assign the output of the above code to the image control on the page? - The image control is called imgMap.

The webdev documentation seems to suggest that its possible to use Javascript Methods using JSMethod (without having to specify the Javascript code) but the documentation is very thin and I can't make head or tails of it.

My main issue is I am not sure how or where to handle the image control (imgMap) in the above javascript code.

After the execution of the above code I should see a map image in my Image control imgMap.

Any help that will lead me in the right direction will be much appreciated.

Thanks and regards

Gautam
Posted on August, 13 2013 - 4:02 PM
Hi Gautam

It looks to me like you should do the following:

3. Create an HTML Field (it will have a div element)... You can call it
wahtever you want, as it's its alais you willbe using later

4. set the height of your html field in the webdev editor, that should
be enough

5. Now, this JS code is using the idv element ID to create what it nees,
so, as you already created a JS function for it, you just need now to
add a parameter to the function, replace the 'map' in the code by the
parameterand call the function with YourHTMLField..alias as the parameter

If I'm not mistaken, that should do the trick

And by the way, you should NOT create an IMAGE control... Clearly, this
library is setting it's own image control INSIDE (or maybe replacing)
the div element (ie the html control)

Best regards


--
Fabrice Harari
International WinDev, WebDev and WinDev mobile Consulting

More information on http://www.fabriceharari.com


On 8/13/2013 7:04 AM, Gautam wrote:
Hello All

I am trying to use a mapping Javascript API in a webdev application.
The API is provided by a company called leaflet. Website:
http://www.leafletjs.com
The API quick start guide has the following steps (in Javascript) for
integrating leaflet into a webpage:

Step 1. Include Leaflet CSS files in the head section of your document:

<link rel="stylesheet"
href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />

I have added this line into the HTML code section (Advanced Tab - under
description) of the webdev page.

Step 2.
Include Leaflet JavaScript file:

<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

I have added this using "Add a web resource" option in the Advanced tab
of the webdev page.


Step 3. Put a div element with a certain id where you want your map to be:

<div id="map"></div>

Not sure how to handle this statement


Step 4. Make sure the map container has a defined height, for example by
setting it in CSS:

#map { height: 180px; }

Not sure how to handle this statement


Step 5. Initialize the map and set its view to our chosen geographical
coordinates and a zoom level:
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('

',
{
attribution: 'Map data &copy; <a
href="http://openstreetmap.org">OpenStreetMap</a>',
maxZoom: 18
}).addTo(map);

Not sure how handle the above code in webdev. I have created a
Javascript local browser procedure and added this in the procedure. How
do I assign the output of the above code to the image control on the
page? - The image control is called imgMap.

The webdev documentation seems to suggest that its possible to use
Javascript Methods using JSMethod (without having to specify the
Javascript code) but the documentation is very thin and I can't make
head or tails of it.

My main issue is I am not sure how or where to handle the image control
(imgMap) in the above javascript code.

After the execution of the above code I should see a map image in my
Image control imgMap.

Any help that will lead me in the right direction will be much appreciated.

Thanks and regards

Gautam
Registered member
67 messages
Posted on August, 13 2013 - 5:24 PM
Hi Fabrice

I have been struggling to get this to work for over two days now. Once again you have come to my rescue! Thank you so much for your guidance. It worked!

I was using an image control - replacing this with an HTML Control did the trick!

Thanks and regards

Gautam