×

Discussion Board

Results 1 to 3 of 3
  1. #1
    Registered User
    Join Date
    Nov 2012
    Posts
    2

    First time using Heat Map and having trouble

    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>

  2. #2
    Regular Contributor
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    289

    Re: First time using Heat Map and having trouble

    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>

  3. #3
    Registered User
    Join Date
    Nov 2012
    Posts
    2

    Re: First time using Heat Map and having trouble

    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.

Similar Threads

  1. 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. Replies: 1
    Last Post: 2009-11-09, 02:33
  4. 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
  •  
×