0
votes

I want to render a KML file in google maps from my asp.net MVC 3 app.

From Google Maps JavaScript API V3, I'm using KmlLayer('url') to render the kml in google maps. I have read that kml file needs to be in a publicly accessible server. I could render the kml file locally with third party javascripts but they can be prone to errors. (Loading a local .kml file using google maps?)

The kml files I want to render are stored in a SQL server database as byte arrays. So for one Kml file I have to write the byte array into a path with kml extension. I have done this with File.WriteAllBytes(path, byte), where path = local path and byte = byte array from Database. THis is done in the Controller of MVC app. This is the code:

public ActionResult MapView(int id)
        {
          Incident inc = db.Incidents.Find(id);
            if (inc.IncidentDatas.Count != 0)
            {
                ViewBag.ListKmlUrls = kmlFileStore(inc);
            }

            return View(inc);
        }

public List<string> kmlFileStore(Incident inc)
        {
            List<string> listKmlUrls = new List<string>();
            // Specify a "currently active folder"
            string activeDir = @"c:\incident" + inc.incId + @"\incidentData";

            //Create a new subfolder under the current active folder
            string newPath = System.IO.Path.Combine(activeDir, "kmlFiles");

            // Create the subfolder
            System.IO.Directory.CreateDirectory(newPath);

            String url;
            foreach(var d in inc.IncidentDatas) {
                url = @"c:\incident" + inc.incId + @"\incidentData\kmlFiles\" + d.id + ".kml";

                 //dataContent is byte[]
                System.IO.File.WriteAllBytes(url, d.dataContent);
                listKmlUrls.Add(url);
            }

            return listKmlUrls;
        }

The idea is the view will access the list of urls through viewbag to pass urls to javascript method KmlLayer(...). But the urls here are only local paths.

So how can the MVC app store the kml file to a publicly accessible server so that it can pass a url to KmlLayer(...)? This would have to be done programmatically.

I'm currently accessing my MVC app and database from localhost. I have a static Ip and name. I would also like to publish the app and database for online access. Not sure how to proceed, please give me some advice/guidance. Thanks.

1

1 Answers

0
votes

There are some problem to make kml file publicly accessible. Say the file location must be accessible by google.

If you want to embed Google Earth in website then there are three methods of importing KML into the plugin. 1. KmlNetworkLink 2. fetchKml 3. ParseKml

Both 1 & 2 need kml file stored in server that must publicly accessible but 3. ParseKml works better way.

<head>
    <title>parsekml_example.html</title>
    <script src="//www.google.com/jsapi?key=ABQIAAAA5El50zA4PeDTEMlv-sXFfRSsTL4WIgxhMZ0ZK_kHjwHeQuOD4xTdBhxbkZWuzyYTVeclkwYHpb17ZQ"></script>
    <script type="text/javascript">
        var ge;
        var placemark;
        var object;

        google.load("earth", "1");

        function init() {
            google.earth.createInstance('map3d', initCB, failureCB);
        }

        function initCB(instance) {
            ge = instance;
            ge.getWindow().setVisibility(true);
            var kmlString = ''
                         + '<?xml version="1.0" encoding="UTF-8"?>'
                         + '<kml xmlns="http://www.opengis.net/kml/2.2">'

                         + '<Document>'
                         + '  <Camera>'
                         + '    <longitude>-122.444633</longitude>'
                         + '    <latitude>37.801899</latitude>'
                         + '    <altitude>139.629438</altitude>'
                         + '    <heading>-70.0</heading>'
                         + '    <tilt>75</tilt>'
                         + '  </Camera>'

                         + '  <Placemark>'
                         + '    <name>Placemark from KML string</name>'
                         + '    <Point>'
                         + '      <coordinates>-122.448425,37.802907,0</coordinates>'
                         + '    </Point>'
                         + '  </Placemark>'

                         + '</Document>'
                         + '</kml>';

            var kmlObject = ge.parseKml(kmlString);
            ge.getFeatures().appendChild(kmlObject);
            ge.getView().setAbstractView(kmlObject.getAbstractView());
        }

        function failureCB(errorCode) {
        }

        google.setOnLoadCallback(init);
    </script>  
</head>
<body>
    <div id="map3d" style="height: 400px; width: 600px;">

    </div>   
</body>

For more detail see http://code.google.com/apis/earth/documentation/kml.html