Discussion Board

Results 1 to 3 of 3
  1. First time using Heat Map and having trouble 2012-11-08, 21:59 #1
    BWilliamson
    BWilliamson is offline
    Registered User BWilliamson's Avatar
    Join Date
    Nov 2012
    Posts
    2
    Hello all,
    All I get is the map, no heat. I've been staring at this code for almost three days now and cannot see the issue.
    I am using a SQL database and pulling data from it with classic ASP to build the page. My date is Count of calls, Latitude, Longitude. I want to show heat maps where the most calls are.

    My source is directly below and below that is the actual page the ASP code generates.

    <!--#include virtual="common/adovbs.inc"-->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Store Support Maps</title>
    <script src="http://api.maps.nokia.com/2.2.3/jsl.js?with=all" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div id="map" style="z-index: -1; left:0px; top:0px; width: 100%; height: 100%; position: absolute;"></div>
    <script type="text/javascript">
    // Set the authentication token, which is needed by the web-services to authenticate your application.
    nokia.maps.util.ApplicationContext.set("authenticationToken", "<Token>");
    var mapContainer = document.getElementById("map");

    <%
    Dim Connect, RS, Query
    Set Connect = Server.CreateObject("ADODB.Connection")
    Query = "select CWAPI.Store, CWAPI.cntcallz, SM.Latitude, SM.Longitude from CarWashCallzNokiaAPI CWAPI inner join storemain SM on CWAPI.Store = SM.storenum"
    Connect.Open "Driver={SQL Server}; Server=dcasql2;Database=supportpage; UID=support; PWD=support"
    Set RS = Server.CreateObject("ADODB.Recordset")
    RS.Open Query, Connect, adOpenStatic
    %>

    var map = new nokia.maps.map.Display(document.getElementById("map"), {
    zoomLevel: 7,
    center: [38.4294,-78.8559]});
    var heatmapData = [
    <%
    DO UNTIL RS.EOF%>
    {"value":<%=RS("cntcallz")%>,"longitude":<%=RS("longitude")%>, "latitude":<%=RS("latitude")%>},
    <%RS.MoveNext
    Loop
    %>
    ]
    // Definition of color gradient to be used in the Heatmap
    var colorizeAPI = {
    stops: {
    "0": "#E8680C",
    "0.25": "#F5A400",
    "0.5": "#FF9000",
    "0.75": "#FF4600",
    "1": "#F51F00"
    },
    interpolate: true
    };
    var hmProvider = new nokia.maps.heatmap.Overlay({
    colors: colorizeAPI,
    opacity: 0.8,
    type: "value"
    });
    // Assuming that data have been loaded previously:
    hmProvider.addData(heatmapData);
    map.overlays.add(hmProvider);

    </script>
    </body>
    </html>








    Now the page the code generates:



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Store Support Maps</title>
    <script src="http://api.maps.nokia.com/2.2.3/jsl.js?with=all" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div id="map" style="z-index: -1; left:0px; top:0px; width: 100%; height: 100%; position: absolute;"></div>
    <script type="text/javascript">
    // Set the authentication token, which is needed by the web-services to authenticate your application.
    nokia.maps.util.ApplicationContext.set("authenticationToken", "<Token>");
    var mapContainer = document.getElementById("map");



    var map = new nokia.maps.map.Display(document.getElementById("map"), {
    zoomLevel: 7,
    center: [38.4294,-78.8559]});
    var heatmapData = [

    {"value":1,"longitude":-78.9341, "latitude":40.3433},

    {"value":1,"longitude":-78.3544, "latitude":40.5402},

    {"value":1,"longitude":-80.1045, "latitude":40.6851},

    {"value":17,"longitude":-80.3046, "latitude":41.603},

    {"value":2,"longitude":-79.0012, "latitude":39.4111},

    {"value":5,"longitude":-79.1886, "latitude":40.6108},

    {"value":2,"longitude":-78.5929, "latitude":40.4593},

    {"value":1,"longitude":-80.4561, "latitude":41.2013},

    {"value":8,"longitude":-79.6668, "latitude":40.424},

    {"value":8,"longitude":-80.2288, "latitude":40.6267},

    {"value":3,"longitude":-79.9546, "latitude":39.8608},

    {"value":5,"longitude":-79.9712, "latitude":40.3362},

    {"value":1,"longitude":-77.2411, "latitude":40.1908},

    {"value":1,"longitude":-76.9867, "latitude":40.3558},

    {"value":4,"longitude":-81.4743, "latitude":41.181},

    {"value":2,"longitude":-80.1104, "latitude":41.1678},

    {"value":1,"longitude":-81.4457, "latitude":40.793},

    {"value":3,"longitude":-78.3919, "latitude":40.4993},

    {"value":2,"longitude":-81.4738, "latitude":40.4937},

    {"value":1,"longitude":-78.991, "latitude":38.0807},

    {"value":2,"longitude":-79.9092, "latitude":36.0594},

    {"value":1,"longitude":-79.9943, "latitude":42.1508},

    {"value":2,"longitude":-76.6931, "latitude":39.9367},

    {"value":2,"longitude":-79.818, "latitude":40.1866},

    {"value":1,"longitude":-80.2227, "latitude":40.5029},

    {"value":13,"longitude":-80.4516, "latitude":41.2558},

    {"value":1,"longitude":-75.4169, "latitude":40.6556},

    {"value":4,"longitude":-81.3308, "latitude":41.1544},

    {"value":2,"longitude":-78.4024, "latitude":37.2721},

    {"value":1,"longitude":-78.7954, "latitude":35.855},

    {"value":7,"longitude":-79.7199, "latitude":40.6998},

    {"value":1,"longitude":-82.017, "latitude":39.9098},

    {"value":1,"longitude":-78.9163, "latitude":38.0766},

    {"value":1,"longitude":-80.2677, "latitude":35.9941},

    {"value":1,"longitude":-77.3111, "latitude":35.5834},

    {"value":2,"longitude":-78.3736, "latitude":40.5364},

    {"value":2,"longitude":-76.636, "latitude":39.9922},

    {"value":1,"longitude":-77.9072, "latitude":39.5446},

    {"value":1,"longitude":-82.4867, "latitude":38.4097},

    {"value":2,"longitude":-80.5964, "latitude":40.0606},

    {"value":3,"longitude":-78.7569, "latitude":40.4674},

    {"value":3,"longitude":-79.806322, "latitude":41.402925},

    {"value":4,"longitude":-80.5982, "latitude":40.3386},

    {"value":1,"longitude":-76.781731, "latitude":40.263825},

    {"value":1,"longitude":-77.707032, "latitude":39.785592},

    {"value":1,"longitude":-80.4747, "latitude":35.6418},

    {"value":1,"longitude":-78.4468, "latitude":36.3296},

    {"value":1,"longitude":-79.9464, "latitude":35.8992},

    {"value":1,"longitude":-79.85172, "latitude":36.069377}

    ]
    // Definition of color gradient to be used in the Heatmap
    var colorizeAPI = {
    stops: {
    "0": "#E8680C",
    "0.25": "#F5A400",
    "0.5": "#FF9000",
    "0.75": "#FF4600",
    "1": "#F51F00"
    },
    interpolate: true
    };
    var hmProvider = new nokia.maps.heatmap.Overlay({
    colors: colorizeAPI,
    opacity: 0.8,
    type: "value"
    });

    hmProvider.addData(heatmapData);
    map.overlays.add(hmProvider);

    </script>
    </body>
    </html>
    Reply With Quote Reply With Quote
  2. Re: First time using Heat Map and having trouble 2012-11-12, 11:49 #2
    jasfox
    jasfox is offline
    Nokia Developer Moderator jasfox's Avatar
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    240
    It looks like the max property of the nokia.maps.heatmap.Overlay.Options is defaulting to -1 which means that data isn't shown. The documentation really needs to be updated to make this clearer.


    Knowing this fact it is simple to "fix" the code, by amending the options as shown:

    Code:
    var hmProvider = new nokia.maps.heatmap.Overlay({
max: 20,
colors: colorizeAPI,
opacity: 0.8,
type: "value"
});
    Also since this is 2.2.3, you'll need to update your authentication to use the nokia.Settings class rather than nokia.maps.util.ApplicationContext

    Code:
    nokia.Settings.set( "appId", "<APP_ID"); 
nokia.Settings.set( "authenticationToken", "<Token>");
    The full code can be found below:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Store Support Maps</title>
<script src="http://api.maps.nokia.com/2.2.3/jsl.js?with=all" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="map" style="z-index: -1; left:0px; top:0px; width: 100%; height: 100%; position: absolute;"></div>
<script type="text/javascript">
// Set the authentication token, which is needed by the web-services to authenticate your application.
nokia.Settings.set( "appId", "<APP_ID"); 
nokia.Settings.set( "authenticationToken", "<Token>");


var mapContainer = document.getElementById("map");



var map = new nokia.maps.map.Display(document.getElementById("map"), {
zoomLevel: 7,
center: [38.4294,-78.8559]});
var heatmapData = [

{"value":1,"longitude":-78.9341, "latitude":40.3433},

{"value":1,"longitude":-78.3544, "latitude":40.5402},

{"value":1,"longitude":-80.1045, "latitude":40.6851},

{"value":17,"longitude":-80.3046, "latitude":41.603},

{"value":2,"longitude":-79.0012, "latitude":39.4111},

{"value":5,"longitude":-79.1886, "latitude":40.6108},

{"value":2,"longitude":-78.5929, "latitude":40.4593},

{"value":1,"longitude":-80.4561, "latitude":41.2013},

{"value":8,"longitude":-79.6668, "latitude":40.424},

{"value":8,"longitude":-80.2288, "latitude":40.6267},

{"value":3,"longitude":-79.9546, "latitude":39.8608},

{"value":5,"longitude":-79.9712, "latitude":40.3362},

{"value":1,"longitude":-77.2411, "latitude":40.1908},

{"value":1,"longitude":-76.9867, "latitude":40.3558},

{"value":4,"longitude":-81.4743, "latitude":41.181},

{"value":2,"longitude":-80.1104, "latitude":41.1678},

{"value":1,"longitude":-81.4457, "latitude":40.793},

{"value":3,"longitude":-78.3919, "latitude":40.4993},

{"value":2,"longitude":-81.4738, "latitude":40.4937},

{"value":1,"longitude":-78.991, "latitude":38.0807},

{"value":2,"longitude":-79.9092, "latitude":36.0594},

{"value":1,"longitude":-79.9943, "latitude":42.1508},

{"value":2,"longitude":-76.6931, "latitude":39.9367},

{"value":2,"longitude":-79.818, "latitude":40.1866},

{"value":1,"longitude":-80.2227, "latitude":40.5029},

{"value":13,"longitude":-80.4516, "latitude":41.2558},

{"value":1,"longitude":-75.4169, "latitude":40.6556},

{"value":4,"longitude":-81.3308, "latitude":41.1544},

{"value":2,"longitude":-78.4024, "latitude":37.2721},

{"value":1,"longitude":-78.7954, "latitude":35.855},

{"value":7,"longitude":-79.7199, "latitude":40.6998},

{"value":1,"longitude":-82.017, "latitude":39.9098},

{"value":1,"longitude":-78.9163, "latitude":38.0766},

{"value":1,"longitude":-80.2677, "latitude":35.9941},

{"value":1,"longitude":-77.3111, "latitude":35.5834},

{"value":2,"longitude":-78.3736, "latitude":40.5364},

{"value":2,"longitude":-76.636, "latitude":39.9922},

{"value":1,"longitude":-77.9072, "latitude":39.5446},

{"value":1,"longitude":-82.4867, "latitude":38.4097},

{"value":2,"longitude":-80.5964, "latitude":40.0606},

{"value":3,"longitude":-78.7569, "latitude":40.4674},

{"value":3,"longitude":-79.806322, "latitude":41.402925},

{"value":4,"longitude":-80.5982, "latitude":40.3386},

{"value":1,"longitude":-76.781731, "latitude":40.263825},

{"value":1,"longitude":-77.707032, "latitude":39.785592},

{"value":1,"longitude":-80.4747, "latitude":35.6418},

{"value":1,"longitude":-78.4468, "latitude":36.3296},

{"value":1,"longitude":-79.9464, "latitude":35.8992},

{"value":1,"longitude":-79.85172, "latitude":36.069377}

]
// Definition of color gradient to be used in the Heatmap
var colorizeAPI = {
stops: {
"0": "#E8680C",
"0.25": "#F5A400",
"0.5": "#FF9000",
"0.75": "#FF4600",
"1": "#F51F00"
},
interpolate: true
};

var hmProvider = new nokia.maps.heatmap.Overlay({
max: 20,
colors: colorizeAPI,
opacity: 0.8,
type: "value"
});

hmProvider.addData(heatmapData);
map.overlays.add(hmProvider);
 


</script>
</body>
</html>
    Jason Fox
    Technical Support Engineer, Maps Platform
    Location & Commerce

    http://developer.here.net/
    Reply With Quote Reply With Quote
  3. Re: First time using Heat Map and having trouble 2012-11-12, 14:37 #3
    BWilliamson
    BWilliamson is offline
    Registered User BWilliamson's Avatar
    Join Date
    Nov 2012
    Posts
    2
    Wow, that was an easy fix. It was the Max: 20 that was causing my issue. I also had already taken care of the authentication piece, I mistakenly included the wrong html code.

    Thank you for the help and quick response.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. When application is left idle for a long time, after some time it does not respond...
    By Rupa in forum Mobile Java General
    Replies: 7
    Last Post: 2010-07-19, 08:28
  2. CSmsMessage::Time() returns current time instead of the time of sms creation
    By elviin in forum Symbian Networking & Messaging (Closed)
    Replies: 1
    Last Post: 2010-04-30, 12:06
  3. Help with time settings(start time and end time) in CAknSettingItemList
    By jeff.jiang in forum Symbian C++
    Replies: 1
    Last Post: 2009-11-09, 02:33
  4. Requests for the time and date to be reset - How to cancel this popup at boot time?
    By mghasan in forum Symbian User Interface
    Replies: 0
    Last Post: 2008-01-03, 17:58

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules

Featured links
Develop
Distribution
Blogs
Community
Resources
Site Map
Terms & Conditions
Privacy Policy
Nokia Developer aims to help you create apps and publish them so you can connect with users around the world.

京ICP备05048969号  © Copyright Nokia 2013 All rights reserved